Compose Multiplatform支持热重载(Hot Reload)了

本文译自Compose Hot Reload is Now Available，原文链接Compose Hot Reload is Now Available，由Suhyeon Kim，发布于2025年3月19日。

译注： 需要注意的是Google通过Android Studio(after Giraffe)里面的Live Edit特性提供了对Android上面的Jetpack Compose的实时更新支持。但它仅支持Jetpack Compose (for Adnroid)，并不支持CMP，也即不支持JetBrains的Compose。也正因为如此JetBrains才会开发面向CMP的Hot Reload。

在Compose UI开发过程中，你是否经常需要构建运行？Compose 热重载现已在Maven Central中推出，可为Compose多平台（桌面）应用中的UI代码提供实时更新。我们无需重启应用即可立即查看UI代码的更改。

让我们来一探究竟！

热重载(Hot Reload)是什么鬼？

许多声明式UI框架都提供了类似概念，热重载，即可以在开发过程中提供对UI更改的近乎即时的反馈（尽管它们的名称不同！）。

例如隔壁的两家：

Flutter热加载：docs.flutter.dev/tools/hot-r...
React Native快速刷新：reactnative.dev/docs/fast-r...

热重载允许开发者实时查看代码更改，无需重启应用或重新编译整个项目。在大多数情况下，热重载会保留应用的状态，因此开发者可以继续与应用交互，而不会丢失进度或上下文。这可以帮助开发者快速演示代码更改对UI的影响，从而提高工作效率，而无需等待漫长的构建。

Compose的热重载

看一下官方的介绍github.com/JetBrains/c...：

在Compose多平台应用中更改你的UI代码，并实时查看结果。无需重启应用。

目前，Compose Hot Reload 适用于针对桌面 JVM 的多平台项目（未来是否有可能扩展？我不确定。:D）。Compose Hot Reload 的最新版本是 v1.0.0-alpha02，于昨天（2025 年 3 月 17 日）发布。现在，开发者可以在Compose多平台应用中查看其UI代码的更改，而无需重启应用。这意味着开发者可以立即预览更改，而无需缓慢的构建和重启。

译注： 现在（2025年4月9日）最新版本是 v1.0.0-alpha04，主要是Bugfix，目前开发中的版本是 v1.0.0-alpha05 。

如何上手

要开始使用Compose Hot Reload，请查看Compose Hot Reload的 GitHub 代码库。

注意： 以下内容基于 v1.0.0-alpha02 编写。

依赖要求

一个以桌面为目标的Compose Multiplatform 项目（参见其FAQ）
Kotlin 2.1.20-Beta2 或更高版本

对于 Android 应用，有一个小的解决方法：首先，你需要从Jetpack Compose插件切换到Compose Multiplatform 插件，然后添加一个单独的 Gradle 模块并配置桌面目标。

将 Gradle 插件应用到你的项目中

将 org.jetbrains.compose.hot-reload Gradle 插件添加到你的构建脚本：

Kotlin 复制代码

plugins {
    kotlin("multiplatform") version "2.1.20-RC" // <- Use Kotlin 2.1.20-RC or higher!
    kotlin("plugin.compose") version "2.1.20-RC" // <- Use Compose Compiler Plugin 2.1.20-RC or higher!
    id("org.jetbrains.compose")
    id("org.jetbrains.compose.hot-reload") version "1.0.0-alpha02" // <- add this additionally
}

启用"OptimizeNonSkippingGroups"：

将以下内容添加到你的 build.gradle.kts ：

Kotlin 复制代码

import org.jetbrains.kotlin.compose.compiler.gradle.ComposeFeatureFlag
// ...
composeCompiler {
    featureFlags.add(ComposeFeatureFlag.OptimizeNonSkippingGroups)
}

为UI热重载提供入口点

在项目的桌面源代码集中，使用 DevelopmentEntryPoint 包装窗口内容。

Kotlin 复制代码

import org.jetbrains.compose.reload.DevelopmentEntryPoint
// ...
fun main() {
    singleWindowApplication(...) {
        DevelopmentEntryPoint { // add this line
            App()
        }
    }
}

这就是我们需要折腾的全部内容。现在让我们看看它是如何工作的。

Demo演示

要了解Compose 热重载的实际效果，我们来看看我的示例项目"Would You Rather Game"。这个项目是一个简单的 Compose 多平台桌面应用，用户可以在其中回答有趣的"Would You Rather"问题。Compose 热重载插件最近已实现。

你可以参考 Compose 热重载的setup提交：setup提交。

如果你在项目上运行desktopRun，你会注意到桌面应用程序旁边会出现一个小的Compose图标。

这将触发 Compose Hot Reload Tooling 模式，如下所示：

UI更改示例

假设我们想要更改GameScreen.kt中的动画。

看到没有！一旦我们保存文件，更改就会立即显示在正在运行的应用程序中。无需重启应用！

热重载当前支持的场景

目前，几乎所有代码更改都支持热重载（除了从类中删除超类型）。

Sebastian Sellmair 的视频和博客文章通过多个演示展示了这些功能，并详细解释了重载的底层工作原理。

局限性

由于它仅支持基于 JVM 的桌面应用，因此目前尚不支持 Android 和其他平台。此外，构建性能方面可能存在一些问题。在我的本地环境中，更改大约需要 3 到 5 秒，感觉比其他声明式UI框架中的热重载慢不少。估计它会在后面得到改善。

由于这是一个 Alpha 版本，因此无法保证稳定性。开发者应该预料到可能会出现一些潜在的错误和迁移挑战，正如 JetBrains 团队所指出的："Alpha 版本意味着使用风险自负，迁移问题也需谨慎。我们打算将这个想法产品化，但尚未最终成型。" 由于该功能仍在积极开发中，因此我们应该在未来的版本中持续关注更新。

提供反馈

如果你遇到任何问题或有改进建议，你可以通过Kotlinlang Slack - Compose Hot Reload分享你的想法。

尤其欢迎提：

设置时遇到的问题

重新加载特定代码段时遇到的问题

关于如何改进/功能请求的想法

目前不太感兴趣的内容：

构建性能：目前，"Gradle 重编译器"的速度将与你的项目速度一样快。强烈建议启用 Gradles 配置缓存，并保持项目非常干净。其他"重编译器"也会有所帮助！（IntelliJ、Amper 等）

总结

我相信 Compose 中的 Hot Reload 是开发 Compose UI的一大变革。它可以让开发人员在无需重启应用的情况下看到更改，从而加快UI开发速度，但它仍处于实验阶段。目前，它最适合个人或早期项目，你可以使用 alpha 版本进行开发。在你自己的 Compose Multiplatform 项目中试用它，体验即时UI反馈的好处！

我迫不及待地想看到即将到来的更新！XD

参考资料

欢迎搜索并关注 公众号「稀有猿诉」 获取更多的优质文章！

保护原创，请勿转载！