吾尝终日而思矣，不如须臾之所学也。
👈🏻 Flutter学习之四 StatelessWidget 和 StatefulWidget
前言
在开始学Flutter的时候，起初还是按照iOS的方式来，导致有很多提示，开始没在意，后来查看过后才知道是命名有问题，下面是简单的总结。
正文
-
命名
1、文件名全部小写，单词用下划线_分割。
1.png
2、类名，大驼峰命名。
2.png
3、变量名、方法名，小驼峰命名;
4、私有方法方法名前加下划线;
3.png 代码自动格式化
command + shift + f
如果觉得不是很好按，那就试下每次保存（command + s）自动格式化吧。设置方法如下：
在vs code 页面，打开偏好设置（command + ，），搜索editor.formatOnSave，设置为true即可，如图4。
4.png
flutter在开发的时候是往往是树形构造，有一定的深度。如果想很详细的看到树形结构，就用尾随逗号吧，结合保存自动格式化，你就可以感受flutter开发的快乐了。
- 嵌套提示线
都知道flutter开发的嵌套严重，有了嵌套提示线（UI预览导航），就可以对节点、子节点一目了然。先上效果，如图5：
5.png
可以清楚的看到Column有2个Row，每个Row有2个Text。设置方法，偏好设置里面搜索
Preview Flutter UI Guides，设置为true，如图6：
6.png
-
快速创建StatelessWidget 和 StatefulWidget
不管是有无状态的Widget，新建的时候都要写大量的代码，其实可以快速创建，类似iOS的代码块。新建dart文件，输入st就可以了，如图7：
7.png
回车之后，如图8：
8.png
回车之后不要有啥操作，里面有好多光标在闪，直接输入类名，然后按下右键就行了，不要回车。如图9：
9.gif
- 查看绘制后的组件大小
这个比较简单，在main.dart里面加上这一行代码即可：
debugPaintSizeEnabled = true;
效果如图9
9.png
后记
暂时用到的就这么多，以后还有新的发现就继续更新。
