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

2021年11月24日 阅读数:5
这篇文章主要向大家介绍Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
Flutter — 加快开发速度的 IDE 快捷方式

上一个关于​​vscode 的插件​​推荐你们看的过瘾不,今天继续给你们带来一些关于android studio的开发小技巧前端

我是早起的年轻人-坚果android

你们能够去微信公众号搜“坚果前端”微信


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡

接下来开始正文。框架

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

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

你猜怎么着?您没必要手动编写小部件类并覆盖构建函数。IDE 能够为您作到!ide

只需键入​​stless​​便可建立一个无状态小部件,以下所示:函数


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_02

或者​​stful​​建立有状态的小部件:工具


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡_03

若是您已经建立了一个​​Stateless Widget​​​并添加了不少子项,但后来意识到您​​State​​​毕竟须要一个,该怎么办?您是否应该建立一个新的​​StatefulWidget​​而后手动将全部代码转移到它?你没必要!优化

您只需将光标放在 上​​StatelessWidget​​​,按​​Alt + Enter​​​或​​Option + Return​​​并单击​​Convert to StatefulWidget​​。将自动为您建立全部样板代码。ui

夏天!


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_04

你能够用 Alt+Enter 作更多神奇的事情 | 选项+返回

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

在小部件周围添加填充

假设您有一个不是 a 的小部件,​​Container,​​​所以它没有​​padding​​​属性。您想提供一些填充,但又惧怕弄乱您的小部件结构。使用咱们的魔杖,您能够添加您的​​Padding​​东西而不会弄乱任何东西:


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_05

只需点击须要填充的小部件上的神奇命令(基于您的操做系统),而后单击​​Add Padding​​如今您能够将默认填充修改成您想要的任何内容。

将小部件居中

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


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

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

您可使用相同的方法用​​Container​​​. 因此如今,new​​Container​​成为您的 Widget 的父级。


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_07

或者,您甚至能够经过单击​​Column​​​或​​Row​​来包装多个小部件!


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡_08

或者用任何其余小部件包装它们:


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡_09

​StreamBuilder​​若是您拥有最新版本的 Flutter 插件,您甚至能够用container包装它们。

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

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

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


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡_11

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

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


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

Ctrl+X


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_13

Ctrl+C

查看小部件的源代码

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


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_快捷方式_14

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

若是您想检查您的小部件能够作什么而无需离开您的文件并深刻研究文档,只需按​​Ctrl+Shift+I​​​或​​Option+SpaceBar​​快速查看小部件的构造函数。

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

快速选择整个小部件

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


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_16

若是它是一个很是大的小部件,那么弄清楚哪一个右括号属于哪一个 Widget 可能会很是使人困惑,咱们不想弄乱咱们的整个结构。

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

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


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_快捷方式_17

修复代码结构

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


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

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

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


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_19


查看用户界面的轮廓

咱们的大多数 Widget 的树中都没有只有一个孩子。他们有孩子的树,有本身的孩子,还有更多。若是您的 Widget 的子级嵌套只有四层深,那么仅经过滚动浏览代码就很难理解代码的结构。谢天谢地,咱们必须​​Flutter Outline​​来拯救咱们!

您能够​​Flutter Outline​​​在 IDE 的最右侧找到;它是垂直选项卡之一,位于​​Flutter Inspector​​. 当你打开它时,它看起来是这样的:


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_重命名_20

如今,您能够清楚地看到哪一个 Widget 位于何处、它们在 UI 中的排列方式以及哪些小部件具备其余子小部件。十分简单!

将代码提取到方法中

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


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

这里的第四个按钮

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


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡_22

上下移动小部件

你能够作的另外一件疯狂的事情​​Flutter Outline​​是,若是你在一个小部件中有多个孩子,你能够轻松地从新排列他们的顺序:


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_快捷方式_23

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

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


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

删除未使用的导入

所以,您正在处理一个项目并导入了大量文件,但随着时间的推移,您的代码会获得愈来愈多的优化。最终,您可能再也不须要大量这些导入。如今您已准备好将代码投入生产,但您须要对其进行清理并删除全部未使用的导入。也许您一般手动删除它们,但因为我在这里让您的生活更轻松,这里有一个很是漂亮的键盘组合:​​Ctrl+Alt+O​


Flutter — 加快开发速度的 IDE 快捷操做#yyds干货盘点#_选项卡_25

坚果,我什么都不记得了

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


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

这就是我如今知道的全部捷径。请务必常常回来查看更多提示、技巧和其余好东西!

好了,今天的文章到这儿就结束了,但愿将来和你们一块儿努力。