Flutter 1.12發(fā)布會(huì)上提到一個(gè)新的Flutter插件 Hot UI铺董。
Hot UI可以快速修改widget屬性，快速預(yù)覽widget顯示效果
仿真調(diào)試時(shí)可以實(shí)現(xiàn)極其快速的熱重啟效果仑性。
本文介紹Hot UI的安裝及基本使用。
安裝
-
更新Flutter Plugins
Preference Plugins -
開(kāi)啟Hot UI功能
Experiments
3.新建一個(gè)Flutter工程，選取main.dart
4.在IDE的最右側(cè)點(diǎn)開(kāi)Hot UI
Flutter Outline
5.打開(kāi)仿真器橘券，運(yùn)行程序茉稠。
基本使用
-
選中MaterialApp Widget描馅，我們可以看到
MaterialApp
Properties展示了MaterialApp全部的屬性
2.選中Text Widget，我們可以看到
Text
同樣而线，Properties展示了作為title的Text全部的屬性
- 當(dāng)我們?cè)赑roperties中修改Text的某個(gè)屬性時(shí)铭污，例如修改顯示的文字。
左側(cè)的代碼會(huì)同步補(bǔ)充或修改膀篮。與此同時(shí)嘹狞，我們可以看到仿真器進(jìn)行了毫秒級(jí)別的熱重載，更新了我們的設(shè)置誓竿。
個(gè)人感覺(jué)這個(gè)功能可能有以下幾個(gè)用處
- 對(duì)于不熟悉的Widget的人磅网，可以查看到全部可設(shè)置的屬性。
- 偷懶使用Properties添加修改屬性筷屡。
- 快速的UI調(diào)試
根據(jù)官方發(fā)布會(huì)上的說(shuō)明涧偷，似乎還有IDE內(nèi)快速預(yù)覽的功能（還未上線(xiàn)）
也許我們不運(yùn)行仿真也能直觀、快速的修改我們的相關(guān)代碼速蕊。
官方圖片
結(jié)束語(yǔ)
對(duì)于我這種喜歡使用StoryBoard類(lèi)似的圖形化UI布局的菜雞嫂丙，這種方式比較親切。畢竟之前進(jìn)行iOS和Andorid開(kāi)發(fā)规哲，都逐步進(jìn)入了圖形化輔助設(shè)計(jì)階段跟啤。無(wú)論如何，秒級(jí)的熱重載都實(shí)在太節(jié)約時(shí)間了。
