Flutter学习之五 文件命名规范及代码格式化

吾尝终日而思矣，不如须臾之所学也。

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

后记

暂时用到的就这么多，以后还有新的发现就继续更新。