磨刀不误砍柴工 -- Flutter开发技巧

上一篇文章中我们配置好了Flutter的开发环境,可以选择 VS Code(以下简称VS) 或 Android Studio(以下简称AS) 其中任意一款工具来开发。

下面,我整理了这两款工具中常用的快捷键及一些技巧,以帮助大家在开发过程中提高效率。


StatelessWidget和StatefulWidget

快速创建基于StatelessWidget和StatefulWidget的组件

只需要输入 stless 就可以创建一个StatelessWidget。

只需要输入 stful 就可以创建一个StatefulWidget。

功能 VS Code Android Studio
StatelessWidget stless + Tab stless + Tab / stless + Enter
StatefulWidget stful + Tab stful + Tab / stful + Enter
将 StatelessWidget 改成 StatefulWidget

AS 中,将光标放在 StatelessWidget 上,按住 Alt+Enter (in Mac is Option+Enter) ,然后单击 Convert to StatefulWidget 将自动进行转换。

VS Code 中,将光标放在 StatelessWidget 上,按住 Ctrl + . (in Mac is Cmd + .) ,然后单击 Convert to StatefulWidget 将自动进行转换。


Alt+Enter 扩展选项

AS
  • Win: 单击任意组件名称 + Alt + Enter
  • Mac: 单击任意组件名称 + Option + Enter
VS Code
  • Win: 单击任意组件名称 + Ctrl + .
  • Mac: 单击任意组件名称 + Command + .


将代码块提取到方法中 Extract Method

提取一段代码块,生成一个新的方法。当你发现某个方法里面过于复杂,需要将某一段代码提取成单独的方法时,该技巧是很有用的。

AS

AS 中,选中代码段MenuRefactorExtractMethod...

对应的快捷键是:

* Win: `选中代码段` + `Ctrl + Alt + M`
* Mac: `选中代码段` + `Command + Option + M`

VS Code

VS Code 中,选中代码段右键菜单重构...Extract Method :

对应的快捷键:

* Win: `选中代码段` + `Ctrl + .` + 选择 `Extract Method`
* Mac: `选中代码段` + `Command + .` + 选择 `Extract Method`

参考:


匹配括号高亮

当代码量多了之后,想要找到某一部分代码时,通过匹配的括号来找是比较方便的。

AS

AS 中,默认支持匹配括号高亮:

VS Code

在 VS Code 中,默认的括号匹配比较简单:

当代码量多了之后,找起来让人看着有些眼晕。

这里,推荐一个比较好用的插件:Bracket Pair Colorizer 2 :

安装之后,相邻的括号颜色不同,区分起来很明显。

不过,这里我不太喜欢自带的这个匹配线,所以我就把它去掉了。在该插件的官方介绍中,可以看到是通过 "bracket-pair-colorizer-2.showHorizontalScopeLine" 类似的选项定义的,在 用户设置 中可以关闭这些。


快捷键

AS 中快捷键

格式化代码:

* Win: `Ctrl +Alt + L`
* Mac: `Command + Option + L`

快速选中整个小部件:

* Win: `双击选中部件名称 + Ctrl + W`
* Mac: `双击选中部件名称 + Option + Up`

部件操作(Alt + Enter):

* Win: `单击任意组件名称 + Alt + Enter`
* Mac: `单击任意组件名称 + Option + Enter`

重命名:

* `点击选中任意组件名称 + Shift + F6`

查看组件源码:

* Win:
    * `Ctrl + Click`
    * `Ctrl + B`
    * `F4`
    * `Ctrl + Enter`
* Mac:
    * `Command + Click`
    * `Command + B`
    * `F4`
    * `Command + Down`

注意:我只找到了跳转过去的快捷键,但没找到跳转回来的快捷键。

查看 Widget 包含的属性:

* Win: `单击任意组件名称 + Ctrl + Shift + I`
* Mac: `单击任意组件名称 + Command + Y`

移除没用的 imports:

* Win: `Ctrl + Alt + O`
* Mac: `Command + Option + O`

上下移动行:

* Win: `单击任意行 + Alt + Shift + Up/Down`
* Mac: `单击任意行 + Option + Shift + Up/Down`

上下移动方法:

* Win: `单击任意方法名称 + Ctrl + Shift + Up/Down`
* Mac: `单击任意方法名称 + Command + Shift + Up/Down`
VS Code 中快捷键

我们知道 VS Code 的插件非常丰富。其中一款名为 Awesome Flutter Snippets 为我们整理了常用的方法和组件的快捷键操作。


VS Code 调试 Flutter

调试

点击 F5 进入调试模式。
点击 Shift + F5 退出调试模式。


“Hot Reload” and “Hot Restart”
调试模式下

Hot Reload:

保存后自动重载

* Win: `Ctrl + S`
* Mac: `Command + S`

点击调试菜单中的 重载按钮 或使用快捷键:

* Win: `Ctrl + Shift + F5`
* Mac: `Command + Shift + F5`

Hot Restart:

* Win: `Ctrl + F5`
* Mac: `Control + F5`

命令模式下

Hot Reload:

* 在命令窗口输入 `r`

Hot Restart:

* 在命令窗口输入 `R`

代码自动格式化

AS 或 IntelliJ IDE
手动执行

在代码窗口中,右键单击代码窗口并选择 Reformat code with dartfmt 菜单,实现自动格式化代码。

相应的快捷键:

* Win: `Ctrl + Alt + L`
* Mac: `Command + Option + L`
自动执行

选择菜单 Android StudioPreferences – 搜索 flutter – 在 Languages & Frameworks 中的 Flutter 右侧界面中,找到 General 选项。

勾选 Format code on save 一项。也可以将子项 Organize imports on save 同时选中。

这里我使用的 Android Studio 版本为 Android Studio 3.3.1 。其他版本可能位置有变化。


VS Code
手动执行

VS Code 代码界面中,右键单击代码窗口并选择 Format Document(格式化文档) 菜单,实现自动格式化代码。

相应的快捷键:

* Win: `Alt + Shift + F`
* Mac: `Option + Shift + F`
自动执行

相比起手动执行的方式,更多人都会选择通过在保存文档时来实现代码的自动格式化。

VS Code 界面中,通过快捷键 Ctrl + , ( Command + , in Mac) 打开 设置 窗口,或者通过 文件首选项设置Code首选项设置 in Mac) 打开 设置 窗口。在搜索栏中输入 edit:formatonsave 打开设置界面。

默认情况下,在保存文件时不会自动格式化文件。

当勾选这一项后,表示在格式化程序可用的前提下,保存文件时会自动格式化。

也可以选择下面的 在 settings.json 中编辑 一项,来自定义该项。

当勾选上面的选项后,默认是在 settings.json 中添加了一行:

1
2
3
{
"editor.formatOnSave": true,
}

默认为 false

个性化设置

比如,我想只在 Dart 代码中实现保存时自动格式化的操作,那么可以这样来设置:编辑 settings.json 文件,增加如下代码:

1
2
3
4
5
6
7
{
"editor.formatOnSave": false,
"[dart]":{
"editor.formatOnSave": true,
}
}

再比如,我想在所有语言下都支持保存时自动格式化的操作,但只在 javascript 代码中不支持保存时自动格式化的功能,那么可以通过如下的方式来设置:

1
2
3
4
5
6
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false,
}
}

可见,VS Code 的设置是非常灵活的。

相关参考

至此,关于工具的一些使用技巧也就介绍完了。

坚持原创技术分享,您的支持将鼓励我继续创作!
如有疑问或需要技术讨论,请留言或发邮件到 service@itfanr.cc