介绍

如果您是 Flutter 开发的新手,那么我们会对这嵌套结构挺烦的,比如我们要从代码中间添加或者删除一个 widget 是很麻烦的,要找到一个 widget 相关代码的开始位置和结束位置,是比较麻烦的。

下面利用一些快捷键,来提高 Flutter 的开发效率。

创建新的 StatelessWidget 或者 StatefulWidget

我们不必手动去编写继承 StatelessWidget 或者 StatefulWidget 并重写 build() 方法。IDE 已经提供了相应的快捷键。

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

或者输入 stful 创建一个 StatefulWidget。

如果一开始我们创建了一个 StatelessWidget,但是后来我们想把它改为一个 StatefulWidget 的话,我们会新建一个 State 类,并修改之前 StatelessWidget 的相关代码。

其实可以不必要这样做,我们只需要将光标 StatelessWidget 的地方,按住 Alt + Enter(在 mac 中是 option + Enter),然后单击 Convert to StatefulWidget,将自动为你创建所有的样板代码。

使用 Alt + Enter 可以做更多的事情

Alt + Enter(在 mac vscode 里 Alt + Enter 是 option + .) 是用于 Flutter 开发中经常要用到的的快捷键。可以单击任何一个 widget,然后按 Alt + Enter,就可以查看对该 widget 进行特定的操作。

给 widget 添加 padding

只需要按下 Alt + Enter,单击 Add Padding 就可以给 widget 的外面加上一层 Padding,并且不会弄乱你之前的代码结构。

设置 widget 居中

只需要按下 Alt + Enter,单击 Center Widget 就可以给 widget 的外面加上一层 Center 的小部件,使 widget 居中。

将 widget 放到 Container 中

只需要按下 Alt + Enter,单击 Wrap with Container 就可以给 widget 的外面加上一层 Container。

将多个 widget 放到 Row,Column 中

只需要按下 Alt + Enter,单击 Wrap with Column 或者 Row 就可以一次性将多个 widget 放置到 Row 或者 Column 中。

将 widget 放到任意的小部件中

只需要按下 Alt + Enter,单击 Wrap with a new widget 就可以将 widget 放到任意的小部件中。

移除 widget

只需要按下 Alt + Enter,单击 Remove Widget 就可以将当前的 widget 进行删除。

快速选择整个小部件

当我们需要提取或者删除整个小部件的时候,一般情况下,我们需要找到整个 widget 的相关代码的开始位置和结束位置,然后再进行操作。

但是如果整个 widget 的代码行数非常多,那么要自己找出相关的代码,那就会很麻烦。

所以在整个时候,我们需要快捷键 Ctrl + W。可以无需移动光标,就可以帮我们选择出整个 widget 的相关代码。 对应的 keymap 是 Select successively increasing code blocks:Ctrl + W(Windows)或 Option + Up(Mac)

格式化代码

大多数的 IDE 都具有格式化代码的功能。我们只需要按下 Ctrl+Alt+L 就可以格式化代码,并且修复缩进不对齐的问题。

使用 Flutter Outline

如果只是通过看代码,来看 widget 之间的嵌套情况,可能需要不断滚动代码,并且也很难理解代码的结构。这个时候,我们需要使用到 Flutter Outline。

Flutter Outline 可以在 IDE 的最右侧找到,位于 Flutter Inspector 的正上方。打开 Flutter Outline,显示的情况是这样的:

现在,我们可以清楚地看到所有的小部件,在 UI 中的排列情况,也可以看出小部件的嵌套情况。

将相关的代码提取成一个方法

Flutter Outline 是一个非常有用的工具。Alt + Enter 快捷键可以做的事情,大部分也可以在 Flutter Outline 上进行操作,不过还是 Alt + Enter 能够实现的功能,还是尽量用 Alt + Enter 就行,比较快。

但是 Flutter Outline 还有更多的功能,比如 Extract Method。当我们编写来一个 Widget,并且代码行数比较长,那可以考虑将这个 widget 相关的代码,提取到一个方法中。这个操作可以利用 Extract Method 来快速完成,不需要你手动将代码转移到一个方法中

上下移动小部件

如果在一个 widget 中有多个孩子 widget,那么我们可以使用 Flutter Outline,来重新排序这些孩子 widget 的顺序。

重命名

重命名方法,重命名 widget,重命名类或者文件名,只需要使用 Shift + F6 就可以输入新名称了。

删除未使用的 import

如果我们正在开发一个项目,并导入了大量文件,但是到最后,有些文件其实是没有被使用到的,所以我们是不需要这些多余的导入的。直接使用 Ctrl+Alt+O,就可以代替手动删除了所有未使用的 import。

原文链接

本文是在原文的基础上简单翻译了一下,并做了一些简单的修改。

原文链接:medium.com/flutter-com…