Flutter----Tip

#1.热重载 安装一次后，修改代码时可以热重载，无需重新安装APP：

#2.属性与类 ctrl+左键，点击查看该属性要接收的是什么类型的实例：
#3.Dart 2.0 可以把 new 去掉 #4.可以把重复的样式封装成函数 
#5.封装页面 
#6.'${widget.counter}' 的意义 **指的就是`'${widget.counter}'`所处的`State` 对应的`StatefulWidget`中的 对应的变量（如这里的count）， 如图： （美元符号，花括号，widget. 等，都不可少）**
#7.分隔线 **横向分隔线，对应垂直滑动的列表： 垂直分隔线，对应水平滑动的列表：**
#8.颜色的八位十六进制与int数的对应关系及其应用  ``` final List colorDatas = [ 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 ];

@override Widget build(BuildContext context) { return ListView.builder( padding: EdgeInsets.all(8.0), //类似于onBindViewHolder，index类比position // %10 是为了 颜色数据 可以在 colorDatas中循环读取 itemBuilder: (BuildContext context,int index){ return Icon( Icons.image, color: Colors.blue[colorDatas[index%10]], size: 100, ); }, itemCount: 20, ); }

<br>
#9.文本可以配置Style
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1a66f6e794f446f0942f8973838b2f0f~tplv-k3u1fbpfcp-zoom-1.image)


<br>
#10.setState()
**官方对setState()的说明：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3912fa8f6f874cbb90b6df41749614f4~tplv-k3u1fbpfcp-zoom-1.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4549ec92ff154a4380bf3230f85d910c~tplv-k3u1fbpfcp-zoom-1.image)
就是与`UI有关的 需要在APP运行时候动态更新的`数据变量，
便需要配置在setState()中，
如下案例：
案例1：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/050852e0ff744180ada6b66464f9b5c1~tplv-k3u1fbpfcp-zoom-1.image)案例2：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5c6b9546af44eca8f807e40b1ee7a04~tplv-k3u1fbpfcp-zoom-1.image)案例3：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5dbd3230e5ad43b580db5a27ad6a4ea0~tplv-k3u1fbpfcp-zoom-1.image)案例4：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/65f05fcf25cb4a9c8d781bb3e7646f79~tplv-k3u1fbpfcp-zoom-1.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e76f9f29d5a141cba68a493675f49110~tplv-k3u1fbpfcp-zoom-1.image)**

<br>
#11.构建布局的技巧
- **变化比较小的可以使用`StatelessWidget`，是一个相对静态的页面；
变化比较大、交互比较多的的可以使用`StatefulWidget`；**
- **根据UI图，构建静态以及可交互的布局**


<br>
#12.framework层定义函数的方式【MaterialPageRoute】
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e25a917604de49f1a4951a470c2e1323~tplv-k3u1fbpfcp-zoom-1.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1a28fccdf5f43f2a9a2556389d6a3e5~tplv-k3u1fbpfcp-zoom-1.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b66b475f8fa744aba4bf8567e8bc6e0f~tplv-k3u1fbpfcp-zoom-1.image)

typedef WidgetBuilder = Widget Function(BuildContext context);

**表示用以上这行代码定义之后，
以后可以用`WidgetBuilder` 等价代替 `Widget Function(BuildContext context)`使用；**



<br>
#13.匿名函数写法
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/28bcc0f00b4343e6ab883a86ac2e22f1~tplv-k3u1fbpfcp-zoom-1.image)


<br>
#14.快捷搭建组件架构
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2ccbbbe14c14402a07601fea119f04e~tplv-k3u1fbpfcp-zoom-1.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e661e8e71b04da8a00375711a6a111c~tplv-k3u1fbpfcp-zoom-1.image)

<br>
#15.使用主题颜色

color: Theme.of(context).primaryColor,

<br>
#16.巧用 Flutter Outline 进行快捷开发
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a402fdd42dd1488db595d1c26b4410e7~tplv-k3u1fbpfcp-zoom-1.image)
如：
【原】
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4099e994bd484e828d2634193782b3ba~tplv-k3u1fbpfcp-zoom-1.image)点击Text，
再点击Container图标：
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e87a8c460a04865b9cca2905b52e2b9~tplv-k3u1fbpfcp-zoom-1.image)代码变成：![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f29f3e81d3645a59d506eab0338bb28~tplv-k3u1fbpfcp-zoom-1.image)



<br>
#17.Ctrl + 左键 跟进 组件属性，<br>可以知道属性 对应需要 接受、配置 的 对象\值\类型<br>以及 可以配置的 哪些 对象\值\类型
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57920181a19e4ec38998883b2c8dc36a~tplv-k3u1fbpfcp-zoom-1.image)![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a4a084f822145dc89b9e543d9bc0bb4~tplv-k3u1fbpfcp-zoom-1.image)



<br>
#18.居中
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19e591549d3443fe83045fda04354b2a~tplv-k3u1fbpfcp-zoom-1.image)


<br>
#

<br>
#

<br>
#

<br>
#

<br>
#