美文网首页Dart & Flutter 相关
AS 开发Flutter 利其器

AS 开发Flutter 利其器

作者: 张_何 | 来源:发表于2020-06-28 14:31 被阅读0次

代码块

  • 可以通过AS中的 preferences -> Editor -> Live Templates 设置自己的代码块
  • stless: 创建一个StatelessWidget子类
  • stful: 创建一个创建一个 StatefulWidget 的子类,并关联 State 子类
  • stanim:创建一个 StatefulWidget 的子类,并关联 State 子类,包含一个 AnimationController 的初始化字段

快捷键

  • Ctrl + r 编译运行
  • cmd + shift + o: 全局搜索文件
  • cmd + shift + f: 全局搜索内容
  • Ctrl+option+ O: 删除未使用的import
  • option + Enter: 自动import未导入的文件,鼠标指向未导入的类,然后option + enter
  • CMD + -/+ 折起/展开代码块
  • CMD + . 折起/展开选中代码
  • CMD + [ 光标回到上一次编辑的位置
  • CMD + ] 光标回到下一次编辑的位置
  • CMD + L 定位某一行,甚至某一个字符
  • CMD + Y 查看选中类的属性
  • option + Enter: 在不同的地方有不同的扩展功能,很方便
  • CMD + option + L 格式化代码
  • CMD + Option +B 显示所有继承自该类的子类
  • Command + N 可以快速生成构造方法
  • option + enter 将statelessWidget 转为statefulWidget
  • 缩进:选中代码 按 Tab 健
  • 反缩进: 选中代码 按 shift + tab 健
  • CMD + Shit + R: 全局搜索替换

代码编辑提示

  • option +enter: 嵌套辅助/去掉控件
  • option +enter: child和children相互转换
  • CMD + option + 左右箭头: 返回上一层或下一层文件

实用工具

  • preferences -> Languages & Frameworks -> Flutter -> Format code on save:保存时自动格式化代码
  • Dart Analysis: 这里所有的警告,如没用到的变量,重复导入的文件
  • 右上边的Flutter outline: 可以清楚地看到所有的小部件,在UI中的排列情况,也可以看出小部件的嵌套情况。Flutter outline 中的 Extract Method。当我们编写来一个Widget,并且代码行数比较长,那可以考虑将这个widget相关的代码,提取到一个方法中
  • 查找类型的引用: Edit > Find > Find Usages

性能分析

在 Debug 模式下启动应用后,使用 View > Tool Windows > Flutter Performance打开性能工具窗口,以查看性能数据,以及 widget 的重载信息。
点击 Performance 窗口中的 Show widget rebuild information,查看正在重载的 widget 统计信息和重载频率。右边第二列显示了所在框架的重载次数。如果重载次数过多,会显示一个黄色旋转圆圈。最右一列显示了进入当前页面后 widget 的重载次数。对于未重载的小部件,将显示一个灰色圆圈,否则将显示一个灰色旋转圆圈。

该工具可以帮助你调试至少四个常见的性能问题:

1、整个屏幕(或大部分屏幕)由一个 StatefulWidget 构成,导致不必要的 UI 构建。可将 UI 拆分成多个具有较轻量 build() 方法的 widget。
2、未在屏幕上显示的 widget 发生了重载。例如,一个延伸到屏幕外的 ListView,或者未给延伸到屏幕外的列表设置 RepaintBoundary,会导致重绘整个列表。
3、AnimatedBuilder 的 build() 方法绘制了一个不需要动画的子树,导致不必要的静态对象重载。
4、一个 Opacity widget 在 widget tree 中使用了一个不必要的高度,或者通过直接操作 Opacity widget 的透明属性创建 Opacity 动画,导致 widget 和它的子树重载。

相关文章

  • AS 开发Flutter 利其器

    代码块 可以通过AS中的 preferences -> Editor -> Live Templates 设置自己...

  • 105--Flutter编辑器Android Studio快捷操

    [TOC] --“工欲善其事必先利其器”记录 Flutter 开发中,使用 Android Studio 的快捷操...

  • dart语法学习记录

    最近在接触flutter这个框架,从中了解到它开发的依赖语言是Dart,工欲善其事必先利其器,想用flutter,...

  • Flutter基础 - IDE常用设置及快捷方式

    1.前言 工欲善其事,必先利其器本文将介绍Flutter开发中IDE工具的常用设置及快捷方式,掌握其中部分内容都将...

  • 2-Flutter 系统开发工具安装与配置

    俗话说“工欲善其事,必先利其器”。选择一个合适的工具,并配置好是很有必要的。下面介绍Flutter 应用开发的再W...

  • Python 学习日志第二篇(841)

    IDE的安装 工于利其事必先利其器 PyCharm PyCharm是JetBrains 开发的 Python ID...

  • Android Studio安装

    “工欲善其事,必先利其器” 开发Android程序之前,先要搭建开发环境(Android Studio)。 And...

  • 利其器

    看看俺得刀,帅不?

  • 利其器

    工欲善其事,必先利其器Anroid 开发的最大的利器就是Android Studio了。工具虽好,但也要称手才行。...

  • 利其器

    子贡问为仁。子曰:“工欲善其事,必先利其器。居是邦也,事其大夫之贤者,友其士之仁者。”——孔子(春秋)《论...

网友评论

    本文标题:AS 开发Flutter 利其器

    本文链接:https://www.haomeiwen.com/subject/jpkgtktx.html