Compose Multiplatform 1.10.0 重磅发布！三大核心升级，跨平台开发效率再提升

一次编写，处处预览；一键热更，即时生效。

JetBrains 正式发布 Compose Multiplatform 1.10.0，这是跨平台 UI 框架的又一重要里程碑。本次更新带来了统一 @Preview 注解 、Navigation 3 导航库 、Compose Hot Reload 正式版三大核心功能，让多平台开发体验更加顺滑。

---

统一 @Preview 注解：告别平台差异

更新内容

以往在 Compose Multiplatform 中使用预览功能时，需要针对不同平台使用不同的注解：

• Desktop 用 androidx.compose.desktop.ui.tooling.preview.Preview
• 旧版通用 org.jetbrains.compose.ui.tooling.preview.Preview

现在只需一个注解 ：androidx.compose.ui.tooling.preview.Preview，可直接在 commonMain 源集中使用，真正实现"一次编写，处处预览"。

使用方式

步骤 1：更新依赖

在 build.gradle.kts 中添加：

commonMain.dependencies {
    implementation(compose.uiTooling)
}

步骤 2：编写预览代码

import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.runtime.Composable

@Preview
@Composable
fun GreetingPreview() {
    MaterialTheme {
        Text("Hello, Compose Multiplatform!")
    }
}

步骤 3：迁移旧代码（IDE 自动提示）

IDE 会自动检测旧注解并提供 Quick Fix，一键完成迁移。

---

Navigation 3：全新导航体验

更新内容

Navigation 3 是一套全新的导航库 ，与传统 Navigation 2 最大的区别在于：可以直接操作导航栈。

不再需要通过隐晦的 navigate() 方法传递参数，而是像操作普通列表一样添加、删除目的地，逻辑更加直观。

使用方式

步骤 1：添加依赖

commonMain.dependencies {
    implementation("org.jetbrains.androidx.navigation3:navigation3-ui:1.0.0-alpha06")
    implementation("org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-navigation3:2.10.0-alpha06")
}

步骤 2：基础导航示例

// 定义导航目的地
sealed class Screen {
    object Home : Screen()
    data class Detail(val id: String) : Screen()
}

@Composable
fun AppNavigation() {
    // 创建可观察的导航栈
    var backStack by remember { mutableStateOf(listOf<Screen>(Screen.Home)) }

    NavDisplay(
        backStack = backStack,
        onBack = { backStack = backStack.dropLast(1) }
    ) { screen ->
        when (screen) {
            is Screen.Home -> HomeScreen(
                onNavigateToDetail = { id ->
                    // 直接添加到栈中
                    backStack = backStack + Screen.Detail(id)
                }
            )
            is Screen.Detail -> DetailScreen(screen.id)
        }
    }
}

步骤 3：平台特定手势支持

iOS 返回手势：

EndEdgePanGestureBehavior(enabled = true)

Web 键盘支持：

• 按 Esc 键自动返回上一页
• 自动关闭 Dialog、Popup 等组件

---

Compose Hot Reload 正式版：即时预览，无需重启

更新内容

Compose Hot Reload 经过长期打磨，现已升级为 v1.0.0 正式版，并且：

• ✅ 内置于 Compose Multiplatform Gradle 插件
• ✅ 默认启用，无需任何配置
• ✅ 支持 Desktop 项目即时热更新

修改代码后，UI 立即刷新，无需重新编译整个应用。

使用方式

对于新项目：

只需引入 Compose 插件，Hot Reload 自动启用：

plugins {
    id("org.jetbrains.compose") version "1.10.0"
    id("org.jetbrains.kotlin.multiplatform") version "2.1.20"
}

对于现有项目：

如果之前手动添加了 Hot Reload 插件，现在可以安全删除：

// ❌ 不再需要
plugins {
    id("org.jetbrains.compose-hot-reload") // 可删除
}

版本要求：

• Kotlin 版本 ≥ 2.1.20
• 若 Kotlin 版本过低，Hot Reload 自动禁用，不影响编译

---

其他重要更新

功能	说明	使用场景
Skia 升级至 M138	渲染性能提升，支持更多图形特性	复杂动画、图形密集型应用
iOS UIKit 自适应尺寸	原生组件自动调整大小，无需手动计算	混合 UIKit 组件开发
Web Esc 键导航	浏览器中 Esc 键触发返回	Web 应用导航体验优化
DialogWindow modalityType	Desktop 对话框支持模态类型设置	桌面应用窗口管理
AGP 9.0.0 支持	兼容最新 Android Gradle Plugin	Android 项目

---

升级指南

最低版本要求

// settings.gradle.kts
pluginManagement {
    plugins {
        kotlin("multiplatform") version "2.1.20"  // 最低要求
        id("org.jetbrains.compose") version "1.10.0"
    }
}

依赖别名迁移

从 1.10.0 开始，Gradle 插件中的依赖别名（如 compose.ui）已弃用，建议直接声明版本：

// ❌ 旧方式（已弃用）
implementation(compose.ui)

// ✅ 新方式
implementation("org.jetbrains.compose.ui:ui:1.10.0")

---

六、总结

Compose Multiplatform 1.10.0 三大核心升级：

功能	状态	核心价值
统一 @Preview	✅ 稳定	一个注解，跨平台预览
Navigation 3	🧪 Alpha	直接操作导航栈
Hot Reload	✅ 稳定	即时热更新，开发效率翻倍

立即升级，体验更高效的跨平台开发！