Flutter 1.12发布会上提到一个新的Flutter插件 Hot UI。
Hot UI可以快速修改widget属性,快速预览widget显示效果
仿真调试时可以实现极其快速的热重启效果。
本文介绍Hot UI的安装及基本使用。
安装
-
更新Flutter Plugins
Preference Plugins -
开启Hot UI功能
Experiments
3.新建一个Flutter工程,选取main.dart
4.在IDE的最右侧点开Hot UI
Flutter Outline
5.打开仿真器,运行程序。
基本使用
-
选中MaterialApp Widget,我们可以看到
MaterialApp
Properties展示了MaterialApp全部的属性
2.选中Text Widget,我们可以看到
Text
同样,Properties展示了作为title的Text全部的属性
- 当我们在Properties中修改Text的某个属性时,例如修改显示的文字。
左侧的代码会同步补充或修改。与此同时,我们可以看到仿真器进行了毫秒级别的热重载,更新了我们的设置。
个人感觉这个功能可能有以下几个用处
- 对于不熟悉的Widget的人,可以查看到全部可设置的属性。
- 偷懒使用Properties添加修改属性。
- 快速的UI调试
根据官方发布会上的说明,似乎还有IDE内快速预览的功能(还未上线)
也许我们不运行仿真也能直观、快速的修改我们的相关代码。
官方图片
结束语
对于我这种喜欢使用StoryBoard类似的图形化UI布局的菜鸡,这种方式比较亲切。毕竟之前进行iOS和Andorid开发,都逐步进入了图形化辅助设计阶段。无论如何,秒级的热重载都实在太节约时间了。