Flutter —快速开发的IDE快捷方式

老孟导读：这是老孟翻译的精品文章，文章全部权归原做者全部。

欢迎加入老孟Flutter交流群，每周翻译2-3篇付费文章，精彩不容错过。

原文地址：medium.com/flutter-com…

若是您是一个 Flutter 初学者，那么您必定厌恶嵌套结构，在代码中添加或删除一个小部件，或者找到一个小部件在何处结束、何处开始是多么困难。 而后，您须要花费一成天的时间来匹配左括号与右括号。 但您并不孤单，由于咱们都是这么走过来的。 咱们花了一些时间来找出捷径，也许您没必要再找出这些捷径，由于我已经作了这些； 而且我整理了全部这些捷径，这些捷径能够在Flutter中更快，更流畅地进行开发。

PS。全部这些快捷方式均适用于Windows中的Android Studio和IntelliJ。您来自iOS吗？也许这篇文章会有所帮助。

建立一个新的Stateless or Stateful组件

你猜怎么了？您没必要手动编写窗口小部件类并覆盖构建功能。 IDE能够为您作到！

只需输入stless便可建立一个无状态小部件，以下所示：

或输入stful建立有状态的小部件：

若是您已经建立了一个无状态小部件并添加了许多子级，可是却意识到您最终将须要一个State怎么办？您是否应该制做一个新的StatefulWidget，而后手动将全部代码转移到该代码上？不用了！

您能够将光标放在StatelessWidget上，按Alt + Enter并单击Convert to StatefulWidget。将自动为您建立全部样板代码。

使用Alt + Enter能够执行更多神奇的事情

Alt + Enter是用于在Flutter中加快开发速度的魔杖。您能够单击任何窗口小部件，按Alt + Enter并查看该特定窗口小部件具备哪些选项。

给组件添加Padding

假设您有一个不是容器的窗口小部件，所以它没有padding属性。您想填充一些内容，但担忧会弄乱您的小部件结构。使用咱们的魔术棒，您能够添加填充而不会弄乱任何东西：

只需在须要填充的小部件上按Alt + Enter，而后单击“add padding”便可。如今您能够将默认填充修改成所需的填充。

Center 组件

这没什么特别的。它只是将小部件放在可用空间的中心。这在列或行内不起做用。

Wrap with a Container, Column, Row or any other Widget

您可使用相同的方法用Container包装小部件。所以，如今，newContainer成为您的小部件的父级。

或者，您甚至能够单击一下就能够用“列”或“行”包装多个小部件！

或使用其余任何小部件包装它们：

你甚至使用 StreamBuilder 包裹子组件：

不喜欢一个组件？删除它

是的，删除小部件就像添加一个新部件同样容易。

轻松复制粘贴或剪切粘贴一行代码

您能够轻松地剪切/复制一行代码，只需将光标保持在该行的末尾，而后按Ctrl + X或Ctrl + C的方式粘贴并像一般同样粘贴（Ctrl + V）

Ctrl+X

Ctrl + C

查看小部件的源代码

那是关于开源框架的最好的事情。 若是您想知道使人惊叹的小部件或类的幕后状况，只需将光标放在其上，而后按Ctrl + B便可。 该连接将充当连接，直接带您Widget的源代码，您能够在其中阅读有关它的全部内容。 Flutter还使用注释来解释其许多代码，从而提供了很好的文档。

在不离开文件或标签的状况下检查小部件的属性

快速选择整个小部件

不少时候，咱们须要提取/删除整个小部件，而后尝试手动选择它们：

若是它是一个很是大的窗口小部件，那么弄清楚哪一个窗口小括号属于哪一个窗口小部件可能会形成混乱，而且咱们不想弄乱咱们的整个结构。

在这样的时候，我喜欢使用这个超级有用的快捷方式。

只需单击要提取的小部件，而后按Ctrl + W。为您选择了整个小部件，而您的光标没有移动一英寸。

格式化代码

有时您的代码只会一团糟。有点像这样：

对于像我这样的人来讲，有些OCD会查看没有适当缩进的代码，这多是一场噩梦。

如今，大多数IDE都具备此功能（尽管可能不是相同的组合键）。只需按Ctrl + Alt + L便可修复缩进并从新格式化代码。

查看您的UI大纲

咱们的大多数小部件的树上只有一个孩子。他们有本身的孩子的树木，还有更多的孩子。若是您的Widget的子级嵌套少至4个深度，那么仅经过滚动浏览就很难理解代码的结构。幸运的是，咱们有Flutter Outline来拯救咱们！

您能够在IDE的最右侧找到Flutter Outline；它是垂直标签之一，位于Flutter Inspector上方。当您打开它时，它看起来像这样：

如今，您能够清楚地看到哪一个窗口小部件，它们在用户界面中的排列方式以及哪些窗口小部件具备其余子窗口小部件。十分简单！

将代码提取到方法中

Flutter Outline是一个很是有用的工具。您可使用Alt + Enter完成大多数操做，例如用Column包装和将Widget居中，可是Flutter Outline选项卡下还有更多很棒的功能！其中之一是“提取方法”按钮。

若是您以为编写的小部件太长了，可能应该是自定义小部件，那么没必要手动将代码转换为方法，您可使用此工具为您作魔术！

上下移动小部件

Flutter Outline能够作的另外一疯狂的事情是，若是一个小部件中有多个子代，则能够轻松地从新排列它们的顺序：

您也能够经过按Shift + Alt +向上/向下键仅向上或向下移动一行

重构重命名

这是大多数IDE都具有的很是基本的工具。这使您能够重命名方法，小部件，类或文件名，并确保也重命名了对该方法的引用。只需使用Shift + F6并输入新名称便可：

删除未使用的导入

所以，您正在从事一个项目，而且导入了许多文件，可是随着时间的流逝，您的代码愈来愈获得优化。最终，您可能再也不须要大量这些进口。如今您能够将代码推入生产环境，可是您须要清理它并删除全部那些未使用的导入。也许您一般是手动删除它们，但因为我是为了简化您的生活，所以这里有一个很是漂亮的键盘组合：Ctrl + Alt + O

我什么都不记得了

若是您像这里的Filip Hracek同样有时会忘记他的快捷方式，咱们将为您提供这一重要的魔术。只需按Ctrl + Shift + A并键入所需的快捷方式。

这就是我目前所知道的全部快捷方式。请务必常常回来查看更多提示，技巧和其余好东西！

我是否错过了神话般的快捷方式？在下面发表评论！

个人文章是免费的，可是您知道您能够按clap👏按钮50次吗？你走得越高，就越激励我为你写更多的东西！

交流

老孟Flutter博客地址（330个控件用法）：laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：