iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0

安裝好 SDK、開發工具及外掛程式後,就完成了所有前置作業。耕讀筆記的第四步,就來初始化 Compose for Desktop 專案,並實際將專案運行起來。

使用 Compose Multiplatform 樣板建立練習專案

建立一個 Compose for Desktop 專案,可直接使用 IntelliJ IDEA 提供的專案建置樣板,快速建立一個全新專案。首先打開 IntelliJ IDEA,並在歡迎頁點選 New Project 建立新專案。

在 New Project 專案精靈對話框裡,選擇左邊側邊欄的 Compose Multiplatform,並在右邊的選項裡分別填上專案名稱(可依筆者慣例使用 compose-practice)、存放路徑、自動初始化版本管理(使用 Git),Configuration 請選擇 Single platform(本系列只專注在單一平台,暫不討論多平台),Platform 請選擇 Desktop(本系列只討論 Compose for Desktop,Compose for Web 暫不討論),Group 可填入您慣用的 Namespace(筆者依慣例用 io.kraftsman),JDK 請選擇剛安裝好的 Eclipse Temurin JDK 17,完成後按 Create 建立專案。

註:熟悉 IntelliJ IDEA 專案樣板的讀者請注意,在之前的版本裡,要建立 Compose for Desktop 專案會使用 Kotlin Multiplatform 專案,並選擇 Compose Desktop Application 樣板。這個建立路徑雖然仍存在,但在新版裡已被標記為 Old version 且僅能建立 Kotlin 1.6.10 的專案。因此推薦改用新的 Compose Multiplatform 樣板建立新專案。

建立新專案後,IntelliJ IDEA 會依設定建立專案資料夾結構、初始化 Git 版本管理,並以 Gradle 建構專案。在初始化的過程中,若 IntelliJ IDEA 彈出提示安裝 Native Debugging Support 外掛程式,可點一下 Install,安裝後重開 IDE 即可。

專案完成初始化建構後,打開左邊的 Commit 工具視窗完成第一次的版本提交。

運行 Compose for Desktop 專案

接著,我們試著把新建立好的專案運行起來。開啟 src/jvmMain/kotlin/Main.kt 檔案,會看到裡面有做為程式進入點的 main() 函式,點擊函式左邊的綠色播放鍵,選擇 Run 'Main.kt',即可把專案運行起來。

IntelliJ IDEA 會開始編譯專案,並在編譯完成後將專案運行起來,運行後會打開一個視窗,視窗左上角會有一個寫著「Hello, World」的按鈕,點一下按鈕,文字就會變成「Hello, Desktop」。若能成功看到視窗及按鈕點擊的互動,恭喜你!表示已完成專案建置並可成功運行。

在 IntelliJ IDEA 裡預覽 Compose 元件

為了能在 IntelliJ IDEA 裡預覽 Compose 元件,我們在前面的筆記裡學習怎麼安裝 Compose Multiplatform IDE Support 外掛程式,現在可以派上用場了!

Main.kt 上半部的程式碼裡,會看到使用 @Composable@Preview Annotation 標記的 App() 函式,其中 @Composable 宣告 App() 函式是一個 Compose 元件,而 @Preview 則表明這段程式碼可做為預覽 UI 的進入點。由於我們安裝了外掛程式,所以在 App() 函式左手邊會出現一個 Compose 圖示,點擊這個圖示就會在編輯器右邊開啟預覽視窗,在編譯完成後就可以在視窗裡看到 App() 這個元件的渲染效果,是不是很方便又直覺呢!

截至目前為止,我們已了解如何建立 Compose for Desktop 的開發環境,並初始化一個練習專案,也了解如何在 IDE 裡預覽 Compose 元件,以及如何編譯並運行專案。接下來,筆者會將耕讀重心往程式碼的部份移動,開始學習怎麼用 Compose 來建立 Desktop UI。


上一篇
第 4 天:安裝 Compose Multiplatform IDE Support 外掛程式
下一篇
第 6 天:解析預設專案架構
系列文
傳教士的 Compose for Desktop 耕讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言