Flutter — 加快开发速度的 IDE 快捷操作#yyds干货盘点#

Posted 2021-11-24 坚果前端

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

上一个关于​​vscode 的插件​​推荐大家看的过瘾不，今天继续给大家带来一些关于android studio的开发小技巧

我是早起的年轻人-坚果

大家可以去微信公众号搜“坚果前端”

接下来开始正文。

如果您是 Flutter 开发的新手，那么您一定会抱怨嵌套结构、在代码中间添加或删除小部件有多难，或者找到一个小部件在哪里结束而另一个小部件从哪里开始有多难。然后，您花了一整天的时间将左括号与其右括号匹配，或者至少尝试匹配。你并不孤单，我们都去过那里。我们花了一些时间来找出捷径，但也许您不必经历那些，因为我为您服务；我已经策划了所有这些快捷方式，这些快捷方式允许在 Flutter 中进行更快、更流畅的开发。

创建一个新的无状态或有状态小部件

你猜怎么着？您不必手动编写小部件类并覆盖构建函数。IDE 可以为您做到！

只需键入​​stless​​即可创建一个无状态小部件，如下所示：

或者​​stful​​创建有状态的小部件：

如果您已经创建了一个​​Stateless Widget​​​并添加了很多子项，但后来意识到您​​State​​​毕竟需要一个，该怎么办？您是否应该创建一个新的​​StatefulWidget​​然后手动将所有代码转移到它？你不必！

您只需将光标放在 上​​StatelessWidget​​​，按​​Alt + Enter​​​或​​Option + Return​​​并单击​​Convert to StatefulWidget​​。将自动为您创建所有样板代码。

夏天！

你可以用 Alt+Enter 做更多神奇的事情 | 选项+返回

这是您在 Flutter 中加快开发速度的魔杖。您可以单击任何一个​​widget​​​，按​​Alt + Enter​​​或​​Option+Return​​​并查看您对该特定选项有哪些选项​​widget​​。IE：

在小部件周围添加填充

假设您有一个不是 a 的小部件，​​Container,​​​因此它没有​​padding​​​属性。您想提供一些填充，但又害怕弄乱您的小部件结构。使用我们的魔杖，您可以添加您的​​Padding​​东西而不会弄乱任何东西：

只需点击需要填充的小部件上的神奇命令（基于您的操作系统），然后单击​​Add Padding​​现在您可以将默认填充修改为您想要的任何内容。

将小部件居中

这不是什么太特别的事情。它只是将您的小部件集中在可用空间中。这在列或行内不起作用。

用Container、row、Column或任何其他小部件包装

您可以使用相同的方法用​​Container​​​. 所以现在，new​​Container​​成为您的 Widget 的父级。

或者，您甚至可以通过单击​​Column​​​或​​Row​​来包装多个小部件！

或者用任何其他小部件包装它们：

​​StreamBuilder​​如果您拥有最新版本的 Flutter 插件，您甚至可以用container包装它们。

不喜欢小部件？用魔术棒取下它。

是的，删除小部件就像添加新小部件一样简单。

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

您可以轻松地剪切/复制一行代码，只需将光标保持在该行的任意位置，然后像往常一样按下​​Ctrl+X​​​或​​Ctrl+C​​​并粘贴它 ( ​​Ctrl+V​​​)。或者对于 ios，同样可以使用​​Command+X​​​, ​​Command+C​​​&​​Command+V​​

Ctrl+X

Ctrl+C

查看小部件的源代码

这是开源框架的最佳之处。如果您想知道一个惊人的小部件或类的幕后发生了什么，那么您只需将光标放在它上面并按​​Ctrl + B​​​或​​Command+B​​。它将作为一个链接，将您直接带到您的 Widget 的源代码，您可以在其中阅读有关它的所有内容。Flutter 还使用注释来解释它的许多代码，从而形成了很好的文档。

在不离开文件或选项卡的情况下检查小部件的属性

如果您想检查您的小部件可以做什么而无需离开您的文件并深入研究文档，只需按​​Ctrl+Shift+I​​​或​​Option+SpaceBar​​快速查看小部件的构造函数。

快速选择整个小部件

很多时候我们需要提取/删除整个小部件，我们尝试手动选择它们：

如果它是一个非常大的小部件，那么弄清楚哪个右括号属于哪个 Widget 可能会非常令人困惑，我们不想弄乱我们的整个结构。

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

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

修复代码结构

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

对于像我这样对没有适当缩进的代码感到有点强迫症的人来说，这可能是一场噩梦。

现在，大多数 IDE 都具有此功能（尽管可能不是相同的组合键）。只需按下​​Ctrl+Alt+L​​即可修复缩进并重新格式化代码。

查看用户界面的轮廓

我们的大多数 Widget 的树中都没有只有一个孩子。他们有孩子的树，有自己的孩子，还有更多。如果您的 Widget 的子级嵌套只有四层深，那么仅通过滚动浏览代码就很难理解代码的结构。谢天谢地，我们必须​​Flutter Outline​​来拯救我们！

您可以​​Flutter Outline​​​在 IDE 的最右侧找到；它是垂直选项卡之一，位于​​Flutter Inspector​​. 当你打开它时，它看起来是这样的：

现在，您可以清楚地看到哪个 Widget 位于何处、它们在 UI 中的排列方式以及哪些小部件具有其他子小部件。十分简单！

将代码提取到方法中

​​Flutter Outline​​​是一个非常有用的工具。你可以做 您所做的大多数事情都​​Alt + Enter,​​​喜欢用 Column 包裹和将 Widget 居中，但在​​Flutter Outline​​​选项卡下还有更多很棒的东西可用！其中之一是​​Extract Method​​按钮。

这里的第四个按钮

如果您觉得您正在编写的 Widget 太长并且应该是一个自定义的 Widget，那么您无需手动将代码转换为方法，而是可以使用此工具为您创造奇迹！

上下移动小部件

你可以做的另一件疯狂的事情​​Flutter Outline​​是，如果你在一个小部件中有多个孩子，你可以轻松地重新排列他们的顺序：

您也可以通过按移动只是一个线向上或者向下​​Shift+Alt+Up​​​/​​Down​​重构重命名

这是一个非常基本的工具，大多数 IDE 都有。这使您可以重命名方法、小部件、类或文件名，并确保对它的引用也被重命名。只需使用​​Shift + F6​​并输入新名称：

删除未使用的导入

因此，您正在处理一个项目并导入了大量文件，但随着时间的推移，您的代码会得到越来越多的优化。最终，您可能不再需要大量这些导入。现在您已准备好将代码投入生产，但您需要对其进行清理并删除所有未使用的导入。也许您通常手动删除它们，但由于我在这里让您的生活更轻松，这里有一个非常漂亮的键盘组合：​​Ctrl+Alt+O​​

坚果，我什么都不记得了

​

在这里，有时会忘记自己的捷径的人，我也为您准备了这个重要的魔法咒语。只需​​Ctrl+Shift+A​​输入您需要的快捷方式。

这就是我现在知道的所有捷径。请务必经常回来查看更多提示、技巧和其他好东西！

好了，今天的文章到这儿就结束了，希望未来和大家一起努力。