還記得在提到使用 Jetpack Compose 開發 UI 時的好處之一,就是「方便預覽」。若讀者試著在 Android Studio 裡建立一個全新的 Empty Compose Activity 專案,在預設的範例程式碼裡,就會看到標記 @Preview
的 Composable
元件,開啟右邊的預覽工具視窗,就可以看到元件渲染(Render)之後的結果。
由於 Compose 元件可以像積木一樣由小到大、透過多層次推疊組合而成,因此在預覽時,可以依宣告的程式碼,預覽不同層級的元件,也能即時的預覽修改後的結果,非常方便且有效率。不過,這個預覽功能是 Android Studio 裡專為 Jetpack Compose 設計的,當要寫 Compose for Desktop 時,也能在 IntelliJ IDEA 裡有一樣的功能嗎?
有的!JetBrains 團隊也為 Compose Multiplatform 寫了 IntelliJ IDEA 的外掛程式(Plugin),安裝後就能在 Compose for Desktop 專案裡擁有跟 Android Studio 一樣的預覽功能。因此耕讀筆記的第三步,就是要在 IntelliJ IDEA 裡安裝 Compose Multiplatform IDE Support 外掛程式。
IntelliJ IDEA 是 JetBrains 用 IntelliJ Platform 開源專案打造的全功能 IDE,由於 IntelliJ Platform 支援外掛程式,因此許多 IDE 包括 Android Studio 都是以它為基底打造,若 IDE 有缺什麼功能,都可以透過開發外掛程式來擴充。IntelliJ IDEA 可安裝的外掛程式,可統一在 JetBrains Marketplace 查詢。
在 IntelliJ IDEA 安裝外掛程式的步驟很簡單,首先開啟 IDE,在歡迎頁左邊點選 Plugin,並在右邊上方選擇 Marketplace 頁籤。接著在下方的搜尋框裡輸入 Compose 關鍵字,出現搜尋結果的第一個就會是 Compose Multiplatform IDE Support。
點擊右邊的 Install 按鈕,IntelliJ IDEA 就會自動將外掛程式從 JetBrains Marketplace 下載並安裝,且不需要重新啟動 IDE 就能直接使用,流程非常簡單!
IntelliJ IDEA 每年至少會有三次大版本更新,隨著新版本的推出,IntelliJ Platform 也會有新的變化,因此有時會發生外掛程式來不及更新,一時跟不上 IDE 主版本號的情況。在筆者撰寫此讀書筆記的當下(2022 年 9 月),IntelliJ IDEA 的主版本是 2022.2.1,但從 Compose Multiplatform IDE Support 的版本資訊裡可以看到目前只支援到 2022.1.4。
若遇到外掛程式暫時跟不上 IDE 主版本時,可以透過 Toolbox App 安裝多版本的 IntelliJ IDEA,在開發 Compose for Desktop 專案時,暫時切回舊版使用。
使用 Toolbox App 安裝多版本 IDE 的方式很簡單,首先開啟 Toolbox App 工具視窗,點一下 IntelliJ IDEA 旁邊的設定按鈕,選擇 Other versions。
在版本列表裡,選擇想要安裝的版本(本文情境為 2022.1.4 版)後,點選右邊的 Install 按鈕。Toolbox App 就會下載指定的 IDE 版本並安裝。
在 Toolbox App 首頁就會看到兩個不同版本的 IntelliJ IDEA,在後續開發 Compose for Desktop 專案時,點選指定版本的 IDE 開發即可。