Flutter終於有視覺化編輯頁面了(Hot UI)

AWeiLoveAndroid發表於2019-12-17

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.4 Android Studio build 193.3519.25 — 193.* Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6 IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc)
IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc)
42.1.3 Android Studio build 192.7142 — 192.* 這個我找不到 IntelliJ IDEA Ultimate 2019.2.4
IntelliJ IDEA Community 2019.2.4
42.1.2 Android 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.1 Android Studio build 191.8026 — 191.* Android Studio 3.5.3 IntelliJ IDEA Ultimate 2019.1.4
IntelliJ IDEA Community 2019.1.4

Flutter42.0.*外掛版本:

Flutter外掛版本號 支援的Android Studio內部版本號 支援的Android Studio發行版本號 支援的Intellij IDEA版本號 特點
42.0.4 Android Studio build 193.3519.25 — 193.* Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6 IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc)
IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc)
HOT UI的實現
42.0.3 Android Studio build 192.7142 — 192.* 這個我找不到 IntelliJ IDEA Ultimate 2019.2.4
IntelliJ IDEA Community 2019.2.4
HOT UI的實現
42.0.2 Android 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.1 Android Studio build 191.8026 — 191.* Android Studio 3.5.3 IntelliJ IDEA Ultimate 2019.1.4
IntelliJ IDEA Community 2019.1.4
HOT UI的實現

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

Android Studio發行版本號 內部版本號
Android Studio 4.0 Canary 6 193.6052267
Android Studio 3.6 Beta 5 192.6018865
Android Studio 3.5.3 191.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 10 192.5842447
Android Studio 3.6 Canary 9 192.5830636
Android Studio 3.6 Canary 8 192.5825043
Android Studio 3.6 Canary 7 192.5807797
Android Studio 3.5 191.5791312
Android Studio 3.6 Canary 6 192.5787298
Android Studio 3.6 Canary 5 191.5721125
Android Studio 3.6 Canary 4 191.5679705
Android Studio 3.6 Canary 3 191.5618338
Android Studio 3.6 Canary 2 191.5599242
Android Studio 3.6 Canary 1 191.5595896

外掛使用介紹

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

Flutter終於有視覺化編輯頁面了(Hot UI)

然後你可以在“HOT UI"上面更改你的元件的屬性,然後它會直接在預覽介面及你的裝置上面更新。

Flutter終於有視覺化編輯頁面了(Hot UI)

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

Flutter終於有視覺化編輯頁面了(Hot UI)


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

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

相關文章