1、Flutter使用总结(RichText、Container)

1、创建Flutter项目

 flutter create DemoName

2、运行项目

flutter run -d ‘iPhone 14 Pro Max’

注: 当运用Android Studio时、选择安卓模拟器运行项目、如果项目路径有中文名称: 那么运行报错、如果直接在项目路径下,采用终端运行安卓模拟器、可执行如下命令

flutter run -d ‘Android SDK built for x86’
No supported devices found with name or id matching 'Android SDK built for x86'.
The following devices were found:

此时会输出相应的设备名称及设备标识、比如选择当前USB连接的小米设备标识“46ffd0ad”执行

flutter run -d ‘46ffd0ad’

则会运行到当前手机上

3、当对当前项目做了修改时、在当前运行情况下输入 r、即可执行热重载刷新界面

4、当创建Flutter项目时,FlutterPlugin和Flutter Package的区别在于、

 FlutterPlugin插件适用于针对iOS原生或Android原生的Dart三方包、

 FlutterPackage适用于纯Dart语言应用的三方包、形如一个新的widget

 FlutterModule适用于混合开发

5、当项目运行卡死时、

  • 采用Command + Q强制结束项目、那么下一次使用Android Studio,会读取之前的缓存文件、如果缓存找回来了就会回到之前的工程、在找回来之前会影响新工程的开启、造成卡死现象.这个时候需要删除缓存文件
rm ~/opt/flutter/bin/cache/lockfile

6、MaterialApp初使用

  1. material.dart 相当于iOS中的UIKit
  2. runApp相当于UIApplication
  3. Center是一个位置控件
  4. child相当于子控件
  5. 在flutter中，如果内部只有一行代码、可以用箭头符号简写： void main() => runApp(MyWidget());
  6. 在Flutter中所有的Widget小部件分为两大类：有状态的Stateful和无状态的Stateless、无状态为不可变样式；有状态本质上也是无状态部件，但是它会将状态保留下来。
  7. 如何将一个部件显示到界面上？
    • 需要一个渲染方法:build方法,它会将小部件放到小部件渲染树中去，从第一个开始逐步渲染。在build方法中返回渲染样式。
  1. 在点击Text进入其中可以看到参数实现
    1. 其中的参数都为可选参数、也可以为其设置默认值。
    2. final表示不可变参数、var表示可变参数
  1. 重定义一个文字类型 final _textStyle = TextStyle();
  2. 代码块简写 stl 会创建一个 StatelessWidget代码块, stful会创建一个StatefulWidget代码块
  3. MaterialApp封装好一系列的便于开发的组件
  4. Scaffold具备导航条属性的界面,相当于NavigationController
import 'package:flutter/material.dart';//1.相当于iOS中的UIKit
// 以下都属于Dart语法、
// void main(){
//   //2.runApp相当于UIApplication
//   // runApp(
//   //   //3.Center是一个位置控件
//   //   Center(
//   //     //4.child相当于子控件
//   //     child: MyWidget(),
//   //   )
//   // );
//   //上边代码可以改为
//   runApp(MyWidget());
// }
//2、在flutter中，如果内部只有一行代码、可以简写为如下：
// void main() => runApp(MyWidget());
void main() => runApp(App());
// 也就是 => 代表了 {}
// Command + S保存后可以实现热更新
/*
5.在Flutter中所有的Widget小部件分为两大类：有状态的Stateful和无状态的Stateless、
无状态为不可变样式；有状态本质上也是无状态部件，但是它会将状态保留下来。
*/
//6.创建一个Widget，也就是一个类： MyWidget继承于 StatelessWidget无状态部件
class MyWidget extends StatelessWidget{
  /*
  7.如何将一个部件显示到界面上？
  需要一个渲染方法:build方法,它会将小部件放到小部件渲染树中去，从第一个开始逐步渲染。
  在build方法中返回渲染样式。
  */
  @override
  Widget build(BuildContext context) {
    //9.重定义一个文字类型
    final _textStyle = TextStyle(
      color: Colors.cyan,//文字颜色
      fontSize: 30,//文字大小
      fontWeight: FontWeight.bold,
    );
    return Center(
      child: Text('Hello My Flutter',
        textDirection: TextDirection.ltr,
        style: _textStyle,),
    );
  }
  Widget func() {
    return Text('Hello My Flutter', textDirection: TextDirection.ltr,);
  }
}
//8. 在点击Text进入其中可以看到参数实现
/*
  * 其中的参数都为可选参数、也可以为其设置默认值。
  * final表示不可变参数、var表示可变参数
* */
//10.代码块简写 stl 会创建一个 StatelessWidget代码块, stful会创建一个StatefulWidget代码块
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 10.1 MaterialApp封装好一系列的便于开发的组件
    return MaterialApp(
      //11. Scaffold具备导航条属性的界面,相当于NavigationController
      home: Scaffold(
        appBar: AppBar( // 导航条
          title: Text('Flutter Demo'),//导航条名称
          foregroundColor: Colors.red,
        ),
        body: MyWidget(), //导航条之外的body
      ),
      theme: ThemeData( //主题
        //Flutter 2.5之后废弃primaryColor,采用colorScheme
        // primaryColor: Colors.black,
        colorScheme: ColorScheme.light().copyWith(primary: Colors.black),
      ),
    );
  }
}

7、ListView使用及总结

  • ListView相当于TableView、需要填充的是 ListView.builder 协议内容
  • 其中的itemCount相当于numOfRows、在Flutter中没有Section概念
  • 其中的itemBuilder(BuildContext context,int index){} 相当于cellForRow方法
  • SizedBox()是一个边距占位方法
  • Image.network() 是加载网络图片的方法
  • Container中的child在设置时有三种类型:
    • Column 纵向布局、
    • Row横向布局、
    • Stack层级布局
import 'package:flutter/material.dart';//1.相当于iOS中的UIKit
import 'model/car.dart'; //导入头文件
//2、在flutter中，如果内部只有一行代码、可以简写为如下：
// void main() => runApp(MyWidget());
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        colorScheme: ColorScheme.light().copyWith(primary: Colors.cyan),
      ),
    );
  }
}
  • 创建一个无状态的组件
// 12.创建一个无状态的Widget
class Home extends StatelessWidget {
  // _ 表示私有方法
  Widget _cellForRow(BuildContext context,int index){
    // Container相当于前端中的div
    return Container(
      color: Colors.white,//背景色
      // height: 20,// 给高度、默认填充全屏
      margin: EdgeInsets.all(10),
      // Image.network加载网络图片
      // child: Image.network(datas[index].imageUrl),
      child: Column( //Column 纵向布局、Row横向布局、Stack层级布局
        children: <Widget>[
          Image.network(datas[index].imageUrl),
          //文字和图片的空白距离
          SizedBox(height: 10,),
          Text(
            datas[index].name,
            style: TextStyle(
              fontWeight: FontWeight.w800,
              fontSize: 18.0,//字体大小
              fontStyle: FontStyle.values[1],//斜体
            ),
          ),
        ],
      ),
      // 边距设置为底部5
      // margin: EdgeInsets.only(bottom: 5),
    );
  }
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('FlutterDemo'),
        ),
        body: ListView.builder( // ListView相当于TableView、
          itemCount: datas.length, // numberOfItem， 在Flutter中没有Section概念
          //相当于 cellForRow
          itemBuilder: _cellForRow,
        ),
      );
  }
}

8、运行Flutter项目报错 dump failed because resource AndroidManifest.xml not found

  • 此时回到项目根目录下、终端执行
$flutter clean
  • 清楚缓存的build文件、然后再执行
$flutter create .
  • 重新生成编译文件

9、对上述的ListView使用进行再度封装、创建一个 listview_demo.dart文件

import 'package:flutter/material.dart';
import 'car.dart';
class ListViewDemo extends StatelessWidget {
  Widget _cellForRow(BuildContext context,int index){
    // Container相当于前端中的div
    return Container(
      color: Colors.white,//背景色
      // height: 20,// 给高度、默认填充全屏
      margin: EdgeInsets.all(10),
      // Image.network加载网络图片
      // child: Image.network(datas[index].imageUrl),
      child: Column( //Column 纵向布局、Row横向布局、Stack层级布局
        children: <Widget>[
          Image.network(datas[index].imageUrl),
          //文字和图片的空白距离
          SizedBox(height: 10,),
          Text(
            datas[index].name,
            style: TextStyle(
              fontWeight: FontWeight.w800,
              fontSize: 18.0,//字体大小
              fontStyle: FontStyle.values[1],//斜体
            ),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder( // ListView相当于TableView、
        itemCount: datas.length, // numberOfItem， 在Flutter中没有Section概念
        //相当于 cellForRow
        itemBuilder: _cellForRow,
    );
  }
}
  • 此时main.dart文件的调用为
import 'package:flutter/material.dart';
import 'model/listview_demo.dart';
//widget
void main() => runApp(App());
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primaryColor: Colors.yellow,
      ),
    );
  }
}
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      appBar: AppBar(
        title: Text('FlutterDemo'),
      ),
      body: ListViewDemo(),
    );
  }
}

10、Text文本使用

  • 文本赋值可以通过字符串插值的方式: ${_title}
  • 可自定义TextStyle
  • Text最大行数: maxLines
  • 文字溢出样式:overflow
class TextDemo extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(
    fontSize: 16.0, //文字大小
  );
  final String _title = 'iOS 性能优化';
  final String _teacher = 'Holothurian';
  @override
  Widget build(BuildContext context) {
    //1、文本赋值
    return Text(
      '《${_title}》---$_teacher 效率主要是指代码的执行效率、动画的流畅度、应用的冷启动时间和热启动时间、网络通信的阻塞时间等等;消耗主要是指内存的消耗、有没有内存泄漏、CPU的占用率、耗电与应用程序包大小等等;',
      textAlign: TextAlign.center,
      style: _textStyle,
      maxLines: 4,//文字行数
      overflow: TextOverflow.ellipsis,//文字溢出样式：省略号
    );
  }
}

11.富文本RichText

  • RichText表示富文本
  • TextStyle表示文本样式
  • TextSpan表示指定文本片段的风格及手势交互
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 2.RichText 富文本
    return RichText(
        text: TextSpan(
          text: '《iOS 性能优化》',
          style: TextStyle(
              fontSize: 30,
              color: Colors.red
          ),
          children: <TextSpan>[
            TextSpan(
              text: 'Holothurian',
              style: TextStyle(
                  fontSize: 25,
                  color: Colors.cyan
              ),
            ),
            TextSpan(
              text: '效率主要是指代码的执行效率、动画的流畅度、应用的冷启动时间和热启动时间、网络通信的阻塞时间等等;消耗主要是指内存的消耗、有没有内存泄漏、CPU的占用率、耗电与应用程序包大小等等;',
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.black
              ),
            )
          ],
        )
    );
  }
}
  • 效果图

12. Container使用补充

  • margin表示外边距
  • padding表示内边距
  • 当Container子控件没有child内容时、不会显示
class BaseWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Row(//横向布局
        children: <Widget>[
          // 当Container子控件没有child内容时、不会显示
          Container(
            // 外边距
            margin: EdgeInsets.only(top: 20),
            // 内边距
            padding: EdgeInsets.only(left: 10,right: 10,top: 10,bottom: 10),
            color: Colors.red,
            child: Icon(Icons.add),
            // height: 40,
          ),
          Container(
            color: Colors.red,
            child: Icon(Icons.add_a_photo),
          ),
        ],
      ),
    );
  }
}
  • 效果图

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/17186.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言复习笔记2

C语言复习笔记2

1.变量命名只能以数字、字母、下划线组成并且不能以数字开头。 #include<stdio.h> #include<unistd.h>//变量名只能由数字字母下划线组成&#xff0c;不能以数字开头 int main() {//int 2b;return 0; }2.内存中保存的是补码 0的补码取反得补码再求源码是-1。 源码…
阅读更多...
(8) 支持向量机分类器SVC案例：预测明天是否会下雨

(8) 支持向量机分类器SVC案例：预测明天是否会下雨

文章目录 案例介绍1 导库导数据&#xff0c;探索特征2 分集&#xff0c;优先探索标签3 探索特征&#xff0c;开始处理特征矩阵3.1 描述性统计与异常值3.2 处理困难特征&#xff1a;日期3.3 处理困难特征&#xff1a;地点3.4 处理分类型变量&#xff1a;缺失值3.5 处理分类型变量…
阅读更多...
敏捷ACP.敏捷估计与规划.Mike Cohn.

敏捷ACP.敏捷估计与规划.Mike Cohn.

第一部分 传统规划失败的原因 vs 敏捷规划有效的原因 要回答一个 新产品的范围/进度/资源的组合问题&#xff0c;传统规划过程一般不会产生令人非常满意的答案和最终产品。以下- -些论据可以支持这个结论: ●大约2/3的项目会显著超出费用预算(LedererandPrasad1992) ●产…
阅读更多...
网络编程 总结一

网络编程 总结一

一、网络基础&#xff1a; 概念&#xff1a;1> 网络编程的本质就是进程间的通信&#xff0c;只不过进程分布在不同的主机上 2>在跨主机传输过程中&#xff0c;需要确定通信协议后&#xff0c;才可以通信 1. OSI体系结构&#xff08;重点&#xff09; 定义7层模型&…
阅读更多...
Vue电商项目--vuex模块开发

Vue电商项目--vuex模块开发

vuex状态管理库 vuex是什么&#xff1f; vuex是官方提供的一个插件&#xff0c;状态管理库&#xff0c;集中式管理项目中组件共有的数据。 切记&#xff0c;并不是全部的项目都需要Vuex,如果项目很小&#xff0c;完全不需要vuex,如果项目很大&#xff0c;组件很多&#xff0…
阅读更多...
【Leetcode -142.环形链表Ⅱ -143.重排链表】

【Leetcode -142.环形链表Ⅱ -143.重排链表】

Leetcode Leetcode -142.环形链表ⅡLeetcode - 143.重排链表 Leetcode -142.环形链表Ⅱ 题目&#xff1a;给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 …
阅读更多...
Spring源码解读——高频面试题

Spring源码解读——高频面试题

Spring IoC的底层实现 1.先通过createBeanFactory创建出一个Bean工厂&#xff08;DefaultListableBeanFactory&#xff09; 2.开始循环创建对象&#xff0c;因为容器中的bean默认都是单例的&#xff0c;所以优先通过getBean、doGetBean从容器中查找&#xff0c;如果找不到的…
阅读更多...
QML状态与过渡（States and Transitions）

QML状态与过渡（States and Transitions）

目录 一 状态&#xff08;States&#xff09; 一 过渡&#xff08;Transitions&#xff09; 通常我们将用户界面描述为一种状态。一个状态定义了一组属性的改变&#xff0c;并且会在一定的条件下被触发。另外在这些状态转化的过程中可以有一个过渡&#xff0c;定义了这些属性…
阅读更多...
SpringBoot+vue文件上传下载预览大文件分片上传文件上传进度

SpringBoot+vue文件上传下载预览大文件分片上传文件上传进度

文章目录 学习链接上传文件前端后端代码 下载文件a标签下载前端代码后台代码 动态a标签下载前端代码 axios 动态a标签前端代码 浏览器直接输入 预览文件前端代码后端代码 分片上传前后端分别md5加密spark-md5commons-codec 分片上传实现1前端代码后端代码 分片上传实现2前端代…
阅读更多...
Spark RDD 持久化（CheckPoint 检查点）

Spark RDD 持久化（CheckPoint 检查点）

RDD Cache 缓存 RDD 通过 Cache 或者 Persist 方法将前面的计算结果缓存&#xff0c;默认情况下会把数据以缓存 在 JVM 的堆内存中。但是并不是这两个方法被调用时立即缓存&#xff0c;而是触发后面的 action 算 子时&#xff0c;该 RDD 将会被缓存在计算节点的内存中 // cach…
阅读更多...
常用排序算法汇总—Python版

常用排序算法汇总—Python版

一、选择排序 1. 原理&#xff1a; 选择排序&#xff08;Selection Sort&#xff09;是一种简单直观的排序算法&#xff0c;它的基本思路是将数组按顺序分成已排序部分和未排序部分&#xff0c;然后每次从未排序部分中选择出最小的元素&#xff0c;将其添加到已排序部分的末尾…
阅读更多...
【五一创作】【软考：软件设计师】 5 计算机组成与体系结构（三）认证技术 | 计算机可靠性

【五一创作】【软考：软件设计师】 5 计算机组成与体系结构（三）认证技术 | 计算机可靠性

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本文收录于软考中级&#xff1a;软件设计师系列专栏,本专栏服务于软考中级的软件设计师考试,包括不限于知识点讲解与真题讲解两大部分,并且提供电子教材与电子版真题,关注私聊即可 …
阅读更多...
三范式（详解+例子）

三范式（详解+例子）

第一范式&#xff08;1NF&#xff09;&#xff1a;每一列都是不可分割的原子数据项&#xff08;什么意思&#xff0c;每一项都不可分割&#xff0c;像下面的表格就能分割&#xff0c;所以它连第一范式都算不上&#xff09; 分割后的样子 &#xff08;它就是第一范式了&#xff…
阅读更多...
FPGA学习_01_基础知识（有点劝退，心灵弱小者勿入）

FPGA学习_01_基础知识（有点劝退，心灵弱小者勿入）

有些人喜欢直接拿开发板看教程开干&#xff0c;我认为了解点历史发展没什么坏处&#xff0c;一些FPGA的基础知识也是同样重要的。 1.1. FPGA的主要厂商 XILINX 占据FPGA绝大部分的市场份额 ALTERA 被 INTEL 167亿美元收购 改名为INTEL LATTICE 被神秘的中国公…
阅读更多...
HMM理论学习笔记-隐马尔可夫模型的三个元素、假设和问题

HMM理论学习笔记-隐马尔可夫模型的三个元素、假设和问题

文章目录 概率论基础条件概率全概公式边缘概率联合概率联合概率与边缘概率的关系贝叶斯公式&#xff08;条件联合概率&#xff09;马尔科夫链的概念 HMM简述HMM的三个元素符号定义1、状态转移概率矩阵A2、观测概率矩阵B3、初始状态概率向量π HMM的三个假设1、齐次马尔可夫假设…
阅读更多...
Spring Boot使用(基础)

Spring Boot使用(基础)

目录 1.Spring Boot是什么? 2.Spring Boot使用 2.1Spring目录介绍 2.2SpringBoot的使用 1.Spring Boot是什么? Spring Boot就是Spring脚手架,就是为了简化Spring开发而诞生的 Spring Boot的优点: 1.快速集成框架,提供了秒级继承各种框架,提供了启动添加依赖的功能 2.内…
阅读更多...
简单搭建node后台（笔记用）

简单搭建node后台（笔记用）

毕设过程 mongodb 配置 使用node写后台一些语法运用bug关于安装一款群控软件后&#xff0c;修改了环境变量导致后台崩溃![](https://img-blog.csdnimg.cn/7c684b2e318048b3ad1db78484e10e6a.jpeg) vue管理后台 mongodb 配置 https://blog.csdn.net/weixin_43405300/article/de…
阅读更多...
【SPSS】相关分析和偏相关分析详细操作过程（附案例实战）

【SPSS】相关分析和偏相关分析详细操作过程（附案例实战）

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…
阅读更多...
java的spi机制使用场景讲解和具体使用

java的spi机制使用场景讲解和具体使用

八股文背多了&#xff0c;相信大家都听说过一个词&#xff0c;SPI扩展。 有的面试官就很喜欢问这个问题&#xff0c;SpringBoot的自动装配是如何实现的&#xff1f; 基本上&#xff0c;你一说是基于spring的SPI扩展机制&#xff0c;再把spring.factories文件和EnableAutoConf…
阅读更多...
C++（多态上)

C++（多态上)

目录: 1.多态的概念 2.多态的定义和实现 3.虚函数构成重写的特例 4.剖析一道非常经典的题 5.剖析多态的原理 ------------------------------------------------------------------------------------------------------------------------- 1.多态的概念 概念:通俗来说&#…
阅读更多...
最新文章

Copyright @ 2022~2023