Flutter終於有可視化編輯頁面了(HotUI)

NO IMAGE

12月12號的Flutter Interact大會上,Flutter發佈了基於IDEA及AS的插件擴展的最新功能Hot UI,也就是可視化編程,你開源快速更改你的組件屬性,然後同步在你的設備上運行起來,這個功能等了這麼久終於出來了,真是大快人心啊。

下面看看這個功能的簡單具體使用吧:

Flutter插件安裝

打開http://plugins.jetbrains.com/plugin/9212-flutter/,(為啥我老是看成9012?哈哈O(∩_∩)O~有毒。。。),然後根據的開發工具版本下載對應的插件版本:

插件支持的IDE版本

一句話:必須是Android Studio3.5及以上版本才可以使用。

Flutter42.1.*插件版本:

Flutter插件版本號支持的Android Studio內部版本號支持的Android Studio發行版本號支持的Intellij IDEA版本號
42.1.4Android Studio build 193.3519.25 — 193.*Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc)
IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc)
42.1.3Android Studio build 192.7142 — 192.*這個我找不到IntelliJ IDEA Ultimate 2019.2.4
IntelliJ IDEA Community 2019.2.4
42.1.2Android Studio build 192.6262 — 192.7141這個我找不到IntelliJ IDEA Ultimate 2019.2.1 — 2019.2.3
IntelliJ IDEA Community 2019.2.1 — 2019.2.3
42.1.1Android Studio build 191.8026 — 191.*Android Studio 3.5.3IntelliJ IDEA Ultimate 2019.1.4
IntelliJ IDEA Community 2019.1.4

Flutter42.0.*插件版本:

Flutter插件版本號支持的Android Studio內部版本號支持的Android Studio發行版本號支持的Intellij IDEA版本號特點
42.0.4Android Studio build 193.3519.25 — 193.*Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc)
IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc)
HOT UI的實現
42.0.3Android Studio build 192.7142 — 192.*這個我找不到IntelliJ IDEA Ultimate 2019.2.4
IntelliJ IDEA Community 2019.2.4
HOT UI的實現
42.0.2Android Studio build 192.6262 — 192.7141這個我找不到IntelliJ IDEA Ultimate 2019.2.1 — 2019.2.3
IntelliJ IDEA Community 2019.2.1 — 2019.2.3
HOT UI的實現
42.0.1Android Studio build 191.8026 — 191.*Android Studio 3.5.3IntelliJ IDEA Ultimate 2019.1.4
IntelliJ IDEA Community 2019.1.4
HOT UI的實現

以下是我能夠在中文官網看到的版本號信息(當然有一些版本號我怎麼也找不到,也找不到在哪裡可以下載到,英文官網裡面沒有,中文官網也沒有介紹,希望中文官網可以把這些版本下載信息都更新一下。)

Android Studio發行版本號內部版本號
Android Studio 4.0 Canary 6193.6052267
Android Studio 3.6 Beta 5192.6018865
Android Studio 3.5.3191.6010548
Android Studio 4.0 Canary 5
Android Studio 4.0 Canary 4
Android Studio 3.6 Beta 4
Android Studio 4.0 Canary 3
Android Studio 4.0 Canary 2
Android Studio 3.6 Beta 3
Android Studio 3.5.2
Android Studio 3.6 Beta 2
Android Studio 4.0 Canary 1
Android Studio 3.6 Beta 1
Android Studio 3.5.1
Android Studio 3.6 Canary 12
Android Studio 3.6 Canary 11
Android Studio 3.6 Canary 10192.5842447
Android Studio 3.6 Canary 9192.5830636
Android Studio 3.6 Canary 8192.5825043
Android Studio 3.6 Canary 7192.5807797
Android Studio 3.5191.5791312
Android Studio 3.6 Canary 6192.5787298
Android Studio 3.6 Canary 5191.5721125
Android Studio 3.6 Canary 4191.5679705
Android Studio 3.6 Canary 3191.5618338
Android Studio 3.6 Canary 2191.5599242
Android Studio 3.6 Canary 1191.5595896

插件使用介紹

你可以在Flutter的IntelliJ / Android Studio插件中找到這個新功能,目前還是預覽版。然後你可以在構建組件時可以直接在IDE中查看它們並與之交互,點擊菜單File -> Settings-> Languages & Frameworks(或者打開設置頁面之後,直接搜索HOT UI),然後找到Flutter,然後勾選“HOT UI”,具體操作如下圖所示:

Flutter終於有可視化編輯頁面了(HotUI)

然後你可以在“HOT UI“上面更改你的組件的屬性,然後它會直接在預覽界面及你的設備上面更新。

Flutter終於有可視化編輯頁面了(HotUI)

使用動態圖解如下圖所示:

Flutter終於有可視化編輯頁面了(HotUI)


作者寫文章不容易,覺得好看的話,點個贊支持一下吧,謝謝大家。

更多關於Flutter精彩乾貨,歡迎關注公眾號【Flutter那些事】,乾貨等你來拿。

相關文章

Redis中的數據持久化策略(RDB)

一文帶你瞭解OAuth2協議與SpringSecurityOAuth2集成!

「又是一年跳槽季」380+篇前端面試文章助你一臂之力🔥

[2020,步履不停|年度徵文]