Alpha

Compose Hot Reload

Compose Hot Reload 可協助您在處理 Compose Multiplatform 專案時，視覺化並試驗使用者介面 (UI) 的變更。

目前，Compose Hot Reload 僅在您的多平台專案中包含桌面目標時可用。我們正在探索未來新增對其他目標的支援。同時，使用桌面應用程式作為您的沙盒，可讓您快速試驗通用程式碼中的 UI 變更，而不會中斷您的工作流程。

將 Compose Hot Reload 加入您的專案

Compose Hot Reload 可以透過兩種方式新增：

• 在 IntelliJ IDEA 或 Android Studio 中從頭開始建立專案
• 將其作為 Gradle 外掛程式新增到現有專案

從頭開始

本節將引導您完成在 IntelliJ IDEA 和 Android Studio 中建立包含桌面目標的多平台專案的步驟。當您的專案建立後，Compose Hot Reload 會自動加入。

1. 在 快速入門 中，完成 為 Kotlin Multiplatform 開發設定環境 的說明。
2. 在 IntelliJ IDEA 中，選取 File | New | Project。
3. 在左側面板中，選取 Kotlin Multiplatform。
4. 在 New Project 視窗中指定 Name、Group 和 Artifact 欄位。
5. 選取 Desktop 目標並點擊 Create。

加入到現有專案

本節將引導您完成將 Compose Hot Reload 加入到現有多平台專案的步驟。這些步驟以 建立具有共享邏輯和 UI 的應用程式 教學課程中的專案作為參考。

若要尋找最新版本的 Compose Hot Reload，請參閱 Releases。

1. 在您的專案中，更新版本目錄。在 gradle/libs.versions.toml 中，新增以下程式碼：

   composeHotReload = { id = "org.jetbrains.compose.hot-reload", version.ref = "composeHotReload"}

   若要了解如何使用版本目錄集中管理專案中的依賴項，請參閱我們的 Gradle 最佳實踐。

2. 在父專案的 build.gradle.kts (ComposeDemo/build.gradle.kts) 中，將以下程式碼新增到您的 plugins {} 區塊：

   plugins {
       alias(libs.plugins.composeHotReload) apply false
   }

   這可防止 Compose Hot Reload 外掛程式在您的每個子專案中多次載入。

3. 在包含您的多平台應用程式的子專案的 build.gradle.kts (ComposeDemo/composeApp/build.gradle.kts) 中，將以下程式碼新增到您的 plugins {} 區塊：

   plugins { 
       alias(libs.plugins.composeHotReload)
   }

4. 若要使用 Compose Hot Reload 的完整功能，您的專案必須在 JetBrains Runtime (JBR) 上執行，這是一個支援增強類別重定義的 OpenJDK 分支。 Compose Hot Reload 可以為您的專案自動提供相容的 JBR。為此，請將以下 Gradle 外掛程式新增到您的 settings.gradle.kts 檔案：

   plugins {
       id("org.gradle.toolchains.foojay-resolver-convention") version "0.10.0"
   }

5. 點擊 Sync Gradle Changes 按鈕以同步化 Gradle 檔案：

使用 Compose Hot Reload

1. 在 desktopMain 目錄中，開啟 main.kt 檔案並更新 main() 函數：

   fun main() = application {
       Window(
           onCloseRequest = ::exitApplication,
           alwaysOnTop = true,
           title = "composedemo",
       ) {
           App()
       }
   }

   透過將 alwaysOnTop 變數設定為 true，生成的桌面應用程式會保持在所有視窗之上，使您更容易編輯程式碼並即時查看變更。

2. 在 commonMain 目錄中，開啟 App.kt 檔案並更新 Button 可組合項：

   Button(onClick = { showContent = !showContent }) {
       Column {
           Text(Greeting().greet())
       }
   }

   現在，按鈕的文字由 greet() 函數控制。

3. 在 commonMain 目錄中，開啟 Greeting.kt 檔案並更新 greet() 函數：

    fun greet(): String {
        return "Hello!"
    }

4. 在 desktopMain 目錄中，開啟 main.kt 檔案並點擊編輯器邊欄中的 Run 圖示。選取 Run 'composeApp [desktop]' with Compose Hot Reload (Alpha)。

   

   

5. 更新從 greet() 函數返回的字串，然後儲存檔案以查看桌面應用程式自動更新。

   

恭喜！您已經看到 Compose Hot Reload 的實際運作。現在您可以試驗更改文字、圖像、格式、UI 結構等，而無需在每次更改後重新啟動桌面執行設定。

尋求協助

如果您在使用 Compose Hot Reload 時遇到任何問題，請透過 建立 GitHub 問題 告知我們。