磨刀不误砍柴工 -- 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 中，选中代码段 – Menu – Refactor – Extract – Method... ：

对应的快捷键是：
* Win: 选中代码段 + Ctrl + Alt + M
* Mac: 选中代码段 + Command + Option + M

• 最强 Android Studio 使用小技巧和快捷键-设计师-51CTO博客

---

VS Code

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

对应的快捷键：
* Win: 选中代码段 + Ctrl + . + 选择 Extract Method
* Mac: 选中代码段 + Command + . + 选择 Extract Method

参考：

• v2.12 - Dart Code - Dart & Flutter support for Visual Studio Code
• Refactoring source code in Visual Studio Code

---

匹配括号高亮

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

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

• Flutter开发中常用的快捷键 - 掘金
• 提升 Flutter 开发效率的快捷键 | Wml’Blog
• 最强 Android Studio 使用小技巧和快捷键-设计师-51CTO博客 ⭐️⭐️⭐️

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

• How to do full reload? · Issue #754 · Dart-Code/Dart-Code
• Key Bindings - Dart Code - Dart & Flutter support for Visual Studio Code

---

命令模式下

Hot Reload:
* 在命令窗口输入 r

Hot Restart:
* 在命令窗口输入 R

---

代码自动格式化

AS 或 IntelliJ IDE

手动执行

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

相应的快捷键：
* Win: Ctrl + Alt + L
* Mac: Command + Option + L

自动执行

选择菜单 Android Studio – Preferences – 搜索 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 中添加了一行:

{
    "editor.formatOnSave": true,
}

默认为 false。

个性化设置

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

{
    "editor.formatOnSave": false,
    "[dart]":{
        "editor.formatOnSave": true,
    }

}

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

{
    "editor.formatOnSave": true,
    "[javascript]": {
        "editor.formatOnSave": false,
    }
}

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

相关参考

• 格式化Flutter代码 - Flutter中文网

---

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