Alpha

Compose 热重载

Compose 热重载 帮助您在处理 Compose Multiplatform 项目时可视化并实验 UI 变更。

目前，Compose 热重载仅在您的多平台项目中包含 desktop 目标平台时可用。我们正在探索未来增加对其他目标平台的支持。同时，使用 desktop 应用作为您的沙盒可以帮助您快速实验通用代码中的 UI 变更，而不会中断您的工作流。

将 Compose 热重载添加到您的项目

Compose 热重载可通过两种方式添加，即：

• 在 IntelliJ IDEA 或 Android Studio 中从头创建项目
• 将其作为 Gradle 插件添加到现有项目

从头开始

本节将引导您完成在 IntelliJ IDEA 和 Android Studio 中创建包含 desktop 目标平台的多平台项目的步骤。当您的项目创建后，Compose 热重载将自动添加。

1. 在 快速入门 中，完成以下说明以 为 Kotlin Multiplatform 开发设置环境。
2. 在 IntelliJ IDEA 中，选择 File | New | Project。
3. 在左侧面板中，选择 Kotlin Multiplatform。
4. 在 New Project 窗口中指定 Name、Group 和 Artifact 字段。
5. 选择 Desktop 目标平台，然后点击 Create。

添加到现有项目

本节将引导您完成将 Compose 热重载添加到现有多平台项目的步骤。这些步骤参考了 使用共享逻辑和 UI 创建应用 教程中的项目。

要查找 Compose 热重载的最新版本，请参见 发行版本。

1. 在您的项目中，更新版本目录。在 gradle/libs.versions.toml 中，添加以下代码：

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

   要了解有关如何使用版本目录以集中管理项目中的依赖项的更多信息，请参见我们的 Gradle 最佳实践。

2. 在您的父项目 (ComposeDemo/build.gradle.kts) 的 build.gradle.kts 中，将以下代码添加到您的 plugins {} 代码块中：

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

   这可以防止 Compose 热重载插件在您的每个子项目中被多次加载。

3. 在包含您的多平台应用程序的子项目 (ComposeDemo/composeApp/build.gradle.kts) 的 build.gradle.kts 中，将以下代码添加到您的 plugins {} 代码块中：

   plugins { 
       alias(libs.plugins.composeHotReload)
   }

4. 要使用 Compose 热重载的全部功能，您的项目必须运行在 JetBrains Runtime (JBR) 上，这是一个支持增强类重定义的 OpenJDK 分支。 Compose 热重载可以自动提供兼容的 JBR 给您的项目。 为了实现此目的，请将以下 Gradle 插件添加到您的 settings.gradle.kts 文件中：

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

5. 点击 Sync Gradle Changes 按钮以同步 Gradle 文件：

使用 Compose 热重载

1. 在 desktopMain 目录中，打开 main.kt 文件并更新 main() 函数：

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

   通过将 alwaysOnTop 变量设置为 true，生成的 desktop 应用将保持在所有窗口的顶部，使您更轻松地编辑代码并实时查看更改。

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() 函数返回的字符串，然后保存文件以查看 desktop 应用自动更新。

   

恭喜！您已看到 Compose 热重载的实际效果。现在，您可以尝试更改文本、图像、格式、UI 结构等内容，无需在每次更改后重新启动 desktop 运行配置。

获取帮助

如果您在使用 Compose 热重载时遇到任何问题，请通过 创建 GitHub Issue 告诉我们。