Compose Multiplatform 跨平台 UI 框架技术调研

Compose Multiplatform 是 JetBrains 基于 Jetpack Compose 声明式 UI 模型扩展的跨平台 UI 框架，在 Kotlin Multiplatform 之上共享 Composable 界面，覆盖 Android、iOS、Desktop（Windows/macOS/Linux），Web 处于 Beta。2026 年 Compose Multiplatform 1.7+ 在 iOS 性能与稳定性持续改善，成为 Kotlin 技术栈统一 UI 的首选路径。

一、 基本信息

二、 技术定位与简介

Compose Multiplatform = KMP 逻辑层 + 共享 Composable UI：

• Android 与 Jetpack Compose API 高度一致，Android 开发者迁移成本低。
• iOS/Desktop 通过 Skiko（Skia Kotlin binding）渲染，非 UIKit 控件映射。
• 状态用 remember、mutableStateOf；布局用 Column/Row/LazyColumn。

与 Flutter 差异：同为自绘路线，但语言为 Kotlin、与 Android 官方 Compose 同源。与 SwiftUI 差异：可共享到 Android，但 iOS 上非原生控件。与 RN 差异：无 JS，编译为原生二进制。

适合：Kotlin/Android 团队做 iOS+Desktop、希望 UI 与逻辑最大程度复用、接受自绘渲染模型。

三、 快速上手安装说明

1. 使用 Wizard 创建

访问 kmp.jetbrains.com 选择 Share UI 模板，或 Android Studio KMP + Compose 模板。

2. 最小 Composable

@Composable
fun Greeting(name: String) {
    MaterialTheme {
        Text(text = "Hello, $name!")
    }
}

3. 共享入口（composeApp）

@Composable
fun App() {
    MaterialTheme {
        var count by remember { mutableStateOf(0) }
        Button(onClick = { count++ }) {
            Text("Clicked $count times")
        }
    }
}

4. 运行各端

./gradlew :composeApp:run              # Desktop
./gradlew :composeApp:iosSimulatorArm64Test
# Android 用 androidApp 模块；iOS 用 Xcode 打开 iosApp

四、 核心特性

1. 与 Jetpack Compose 对齐

Material3、Navigation Compose 等 API 跨端复用度高。

2. 声明式与单向数据流

状态提升、重组机制与 Android Compose 一致。

3. 多目标单一 UI 代码库

commonMain 中编写 UI，androidMain/iosMain 处理平台特定 Composable。

4. Desktop 原生窗口

菜单栏、托盘、文件对话框等 Desktop 扩展 API。

5. iOS 持续成熟（2026）

滚动性能、TextField、无障碍与 Xcode 集成改进。

6. Web Beta

Skiko WASM 渲染，适合内部工具而非 SEO 站点。

五、 适用场景

1. 黄金适用场景

• Android Compose 团队扩展 iOS/Desktop 客户端。
• B 端桌面工具 + 移动端配套（统一 Kotlin UI）。
• 对 UI 一致性要求高、可接受自绘的非金融 C 端 App。
• Kotlin 全栈产品，减少 Swift/JS 技能依赖。

2. 局限适用场景

• 追求 iOS 100% 原生 HIG 细节（SwiftUI 更合适）。
• 复杂 Web SEO 产品（Web Beta 不成熟）。
• 团队无 Kotlin 经验且以 React 为主。
• 重度依赖平台独有 UI 控件（地图、复杂 WebView 嵌入）。

六、 技术亮点

1. Android 技能平移

已有 Compose 经验者可在数天内产出 iOS 可运行 UI。

2. 逻辑+UI 双共享

与 KMP data 层自然组合，复用率高于「仅共享逻辑」。

3. Material3 内置

设计系统开箱即用，主题与深色模式统一。

4. IDE 支持

IntelliJ/Android Studio 预览、调试、重构工具完善。

5. 社区库增长

Voyager、Decompose、Coil Multiplatform 等导航与图片方案。

七、 核心概念与架构

digraph ComposeMP_Arch {
  rankdir=TB
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  Composable [label="@Composable UI\n(commonMain)", fillcolor="#bae6fd"]
  ComposeRT [label="Compose Runtime"]
  Skiko [label="Skiko / Skia"]
  Android [label="Android\n(AndroidView/Skia)"]
  iOS [label="iOS\n(Skia render)"]
  Desktop [label="Desktop\n(JVM + Skiko)"]
 
  Composable -> ComposeRT
  ComposeRT -> Skiko
  Skiko -> Android
  Skiko -> iOS
  Skiko -> Desktop
}

重组：状态变化触发 Composable 子树重绘；remember 缓存昂贵计算。

八、 技术局限与边界

1. iOS 生态较新：部分边缘组件行为与 SwiftUI 仍有差距，需真机验收。
2. 包体积：Skia 运行时使 iOS 包大于纯 SwiftUI。
3. Web 未 GA：生产 Web 需谨慎。
4. 第三方 UI 库：少于 Flutter pub.dev，部分需自研或包装原生。
5. 混合导航：嵌入 UIKit/SwiftUI 需 UIKitView/UIViewController 互操作。
6. 渲染非原生：无障碍与系统字体缩放需额外测试。

九、 生态地图

十、 生态集成

十一、 开发与工程化

1. 模块结构

composeApp/src/
  commonMain/kotlin/    # 共享 UI
  androidMain/
  iosMain/
  desktopMain/
shared/                 # 可选：纯逻辑

2. 资源与字符串

compose-resources 插件管理跨端图片与 string.xml 式资源。

3. 平台特定 UI

expect @Composable fun PlatformMap()

4. Gradle 版本对齐

Compose Compiler 与 Kotlin 版本严格对应，查阅官方兼容表。

十二、 性能与安全

• LazyColumn 懒加载长列表；避免重组风暴（稳定参数、key）。
• iOS 用 Instruments 查 GPU 与主线程卡顿。
• Desktop 注意 JVM 堆与 WebView 嵌入时的内存。
• 网络证书校验、密钥存储仍走 KMP actual 平台实现。
• ProGuard/R8（Android）与 iOS strip 配置减小发布体积。

十三、 技术对比

十四、 最佳实践

1. Android 团队优先在 Android 目标验证 UI，再扩 iOS/Desktop。
2. 导航选型尽早统一（Voyager vs Decompose vs 自研）。
3. 平台差异收敛到 expect Composable 或薄 wrapper。
4. iOS 发布前对比 SwiftUI 竞品 App 的滚动与键盘体验。
5. 锁定 Compose/Kotlin 版本组合，升级读 Release Notes。
6. 复杂地图/支付等用 UIKitView/AndroidView 嵌入原生组件。
7. Desktop 与 Mobile 共用 UI 时注意窗口尺寸与触控/鼠标交互差异。

十五、 学习与社区资源

• 官方文档：https://kotlinlang.org/docs/multiplatform/compose-multiplatform.html
• Compose 教程：https://developer.android.com/jetpack/compose/tutorial
• GitHub：https://github.com/JetBrains/compose-multiplatform
• Samples：https://github.com/JetBrains/compose-multiplatform/tree/master/examples
• Kotlin Slack #multiplatform 频道
• Touchlab Compose 实践：https://touchlab.co/compose-multiplatform