Flutter —快速开发的IDE快捷方式
老孟导读:这是老孟翻译的精品文章,文章所有权归原作者所有。
欢迎加入老孟Flutter交流群,每周翻译2-3篇付费文章,精彩不容错过。
原文地址:https://medium.com/flutter-community/flutter-ide-shortcuts-for-faster-development-2ef45c51085b
如果您是一个 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
Flutter —快速开发的IDE快捷方式相关推荐
- Flutter完整开发实战详解(二、 快速开发实战篇) | 掘金技术征文
作为系列文章的第二篇,继<Flutter完整开发实战详解(一.Dart语言和Flutter基础)>之后,本篇将为你着重展示:如何搭建一个通用的Flutter App 常用功能脚手架,快速 ...
- flutter录音_Flutter直播SDK怎么使用?5步快速开发直播应用
原标题:Flutter直播SDK怎么使用?5步快速开发直播应用 Flutter是谷歌的移动UI框架,它能够在iOS和Android上构建高质量的原生用户界面,并且与现有的代码一起工作.现如今,越来越多 ...
- C语言基础:使用IDE快速开发
这篇文章介绍一下如何使用CLion进行C语言的开发与调试. 目录 CLion 安装与设定 创建工程 执行 调试 CLion CLion是Jeb Brain出品的一款跨平台的C/C++的集成开发环境ID ...
- 蒲公英 · JELLY技术周刊 Vol.13 跟 VSCode 学习如何开发大型 IDE 项目
开发一个 IDE 很难么?这或许是件很难的事情,但当我们参考 VSCode 的技术构架来看,整个开发流程就会平滑顺畅很多,从内核开发.代码编辑器.视图结构到插件系统,在这整个技术构架中我们可以看到很多 ...
- Flutter 快速上手,秒变大前端
简介:近两年Flutter的热度不断提升,无论在阿里还是外部公司,参与Flutter生态建设的人越来越多.Flutter作为跨端的UI框架,未来也有很大的可能像Rax一样作为集团内营销活动页面搭建的D ...
- 利用UltimateAndroid框架进行快速开发
UltimateAndroid是一套集成了许多现有优秀的Android开源类库并将之组合成一个整体的Android快速开发框架.框架目前主要包含的功能有View Injection,ORM,异步网络请 ...
- vue手机端回退_推荐3个快速开发平台 前后端都有 接私活又有着落了
经常性逛github,发现了一些优秀的开源项目,其中的框架及代码非常不错,现在给大家推荐三个快速开发平台. 第一个就是优秀的Jeecg-boot快速开发平台 前端采用阿里的ant-design-vue ...
- Flutter快速入门 五步搞定Flutter环境配置
Flutter是什么? Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能.高保真的应用程序. Flutter目标是使开发人员能够交付在不同平台上都感觉自然流 ...
- 菜鸟要做架构师(一)——如何快速开发中小型系统
俗话说:不想当项目经理的程序员不是好的架构师.相信每一个有上进心的程序员,都有一个架构师的梦.最近完成了一个中小型的项目,让我有了一些感受和想法,于是决定新开一个系列--<菜鸟要做架构师> ...
- Python:Python多种集成开发环境(IDE,编译器)的简介、安装、入门、使用方法之详细攻略
Python:Python多种集成开发环境(IDE,编译器)的简介.安装.入门.使用方法之详细攻略 目录 Python多种编译器的简介.安装.入门.使用方法 1.Anaconda 2.ipython ...
最新文章
- .classpath文件
- 智能调温需要哪些计算机知识,一种智能调温的计算机用鼠标的制作方法
- 8.3 直接插入排序
- 点分治(简要讲解 + 模板)
- 单例嵌套 ios_嵌套类型的前5个用例
- PostgreSQL 分页——示例
- 跟着ZHONGHuan学习设计模式--桥接模式
- 森海塞尔Momentum 2无线蓝牙耳机发布:首次加入主动降噪
- python—scipy.stats.multivariate_normal
- Appium 控件定位链接整理(appiumdriver)
- 阿里 java ide_纯JAVA版JAVA IDE环境(源码)
- 程序猿DD元旦送书:第二弹!
- 卸载python2_彻底卸载python
- 黑马程序员各学科超长体验课知识点汇总
- 无人驾驶:高精地图与定位
- echarts省市区id(区域编码)实现地图下钻点击(data赋值自定义属性值,geojson信息获取)
- VS2017无法登录:我们无法刷新此账户的凭证、我们无法添加此账户发送请求时出错、评估期已结束,请登录以解除产品锁定
- Python时间戳转为北京时间
- 使用域名访问后台系统、Nginx反向代理服务器
- 题223.2022寒假天梯赛训练-7-12 清点代码库 (25 分)
热门文章
- 2018杭州云栖大会免费送票啦!
- 底部的footer导航栏被手机虚拟键盘顶起来如何解决
- 示波器基本原理之一:带宽
- 双稳态电路的两个稳定状态是什么_NE555集成电路--交替闪烁灯
- 如何给屏幕设置一个充满全屏幕的背景图片
- 通过脚手架安装Ant+react+umi+dva项目(一)
- 2021年焊工(初级)报名考试及焊工(初级)新版试题
- 老王的JAVA基础课:第3课 IDEA的安装和使用
- css相对图片加文字,html+css怎么在图片上添加文字
- 点击pv转化率_互联网中一些常用指标(PV、UV、蹦失率、转换率、退出率)