Compose Hot Reload 使用教程

Compose Hot Reload 使用教程

compose-hot-reload Compose Hot Reload: Make changes to your UI code in a Compose Multiplatform application, and see the results in real time. No restarts required. Compose Hot Reload runs your application on the JetBrains Runtime and intelligently reloads your code whenever it is changed. 项目地址: https://gitcode.com/gh_mirrors/co/compose-hot-reload

1. 项目介绍

Compose Hot Reload 是由 JetBrains 开发的一款针对 Compose Multiplatform 的实时 UI 代码热重载工具。它允许开发者在构建跨平台用户界面时，能够即时看到 UI 代码更改后的效果，无需重启应用程序。Compose Hot Reload 在 JetBrains Runtime（一个支持增强类重定义的 OpenJDK 分支）上运行，智能地实时重新加载代码。

2. 项目快速启动

环境要求

• 一个配置有桌面目标的 Compose Multiplatform 项目（参考 FAQ 了解如何添加桌面目标）
• Kotlin 2.1.20 或更高版本
• 应用 Gradle 插件

添加 Gradle 插件

在项目的 build.gradle.kts 文件中添加以下插件：

plugins {
    kotlin("multiplatform") version "2.1.20"
    kotlin("plugin.compose") version "2.1.20"
    id("org.jetbrains.compose") // 添加 Compose 插件
    id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha04" // 添加 Hot Reload 插件
}

配置编译器优化

在 build.gradle.kts 文件中启用 OptimizeNonSkippingGroups：

import org.jetbrains.kotlin.compose.compiler.gradle.ComposeFeatureFlag

composeCompiler {
    featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups)
}

设置 JetBrains Runtime

为了使用 Compose Hot Reload 的全部功能，你的项目必须在 JetBrains Runtime (JBR) 上运行。可以通过 Gradle Toolchains 自动下载和设置 JBR。

在 settings.gradle.kts 文件中添加以下配置：

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

创建 UI 入口点

在项目的桌面源集中，添加以下代码到任意文件中，例如 DevMain.kt：

package my.app

import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.WindowState
import androidx.compose.ui.window.singleWindowApplication
import org.jetbrains.compose.reload.DevelopmentEntryPoint

fun main() {
    singleWindowApplication(
        title = "My CHR App",
        state = WindowState(width = 800.dp, height = 800.dp),
        alwaysOnTop = true
    ) {
        DevelopmentEntryPoint {
            MainPage()
        }
    }
}

@Composable
fun MainPage() {
    Text("🔥")
    // 在这里编写你的代码，调用你的可组合函数，或加载整个应用。
    // 进行更改，实时查看效果。
}

创建自定义启动任务

如果你希望通过 Gradle 任务来启动你的热重载应用，可以在 build.gradle.kts 文件中注册以下任务：

tasks.register<JavaExec>("runHot") {
    mainClass.set("my.app.DevMainKt")
}

3. 应用案例和最佳实践

• 实时预览 UI 更改：在开发过程中，直接修改 UI 代码，立即看到更改效果，提高开发效率。
• 模块化开发：将 UI 组件拆分成独立的模块，便于管理和重用。
• 持续集成集成：结合 CI/CD 工具，自动运行测试并确保 UI 的稳定性。

4. 典型生态项目

• Compose Multiplatform：构建跨平台应用的框架。
• Ktor：用于网络通信的服务器端框架。
• Jetpack Compose：用于 Android 应用的现代工具包。

以上是 Compose Hot Reload 的基本使用教程，希望对您的开发工作有所帮助。

compose-hot-reload Compose Hot Reload: Make changes to your UI code in a Compose Multiplatform application, and see the results in real time. No restarts required. Compose Hot Reload runs your application on the JetBrains Runtime and intelligently reloads your code whenever it is changed. 项目地址: https://gitcode.com/gh_mirrors/co/compose-hot-reload