Compose Multiplatform

Compose Multiplatform 是 JetBrains 推动的声明式 UI 框架，基于 Kotlin 和 Jetpack Compose 思想，用于在多个平台上复用 UI 或 UI 架构。它不是 Kotlin 语言本身的一部分，但已经成为 Kotlin Multiplatform 生态中最重要的 UI 方向之一。

它解决什么问题

传统多端开发常见问题：

  • Android、iOS、桌面、Web 重复实现相似界面。
  • UI 状态和业务逻辑分散在不同语言和框架中。
  • 跨平台一致性和平台体验之间难以平衡。

Compose Multiplatform 的目标是用 Kotlin 编写声明式 UI，并根据目标平台生成对应应用。

与 Jetpack Compose 的关系

Jetpack Compose 是 Android 的现代声明式 UI 工具包。Compose Multiplatform 延续了这种编程模型，把 Compose 扩展到更多平台，例如：

  • Android。
  • Desktop。
  • iOS。
  • Web，常见目标是 Kotlin/Wasm。

Android 开发者学习 Compose Multiplatform 的迁移成本通常较低，因为核心思想仍是 composable function、state、recomposition 和声明式 UI。

与 Kotlin Multiplatform 的关系

KMP 负责跨平台代码结构和编译目标；Compose Multiplatform 负责 UI。

常见结构：

commonMain: UI 状态、共享 Composable、业务逻辑
androidMain: Android 入口和平台适配
iosMain: iOS 入口和平台适配
desktopMain: 桌面入口
wasmJsMain: Web 入口

是否共享 UI 是架构选择，不是强制要求。很多团队只共享业务逻辑，UI 仍保持平台原生；也有团队共享大部分 UI。

Web 与 Kotlin/Wasm

官方 Kotlin/Wasm 入门展示了用 Compose Multiplatform 创建 Web app，并通过 Gradle 任务生成网站产物：

./gradlew wasmJsBrowserDistribution

Web 目标适合快速复用 Compose UI 思维，但要关注：

  • 浏览器支持。
  • 首屏加载体积。
  • SEO。
  • 与现有前端生态集成。
  • 调试和发布链路。

如果你的 Web 产品严重依赖传统前端生态，TypeScript 或 Kotlin/JS 仍可能更合适。

UI 共享的取舍

共享 UI 的优点：

  • 多端一致性更强。
  • 同一套状态和组件模型。
  • Kotlin 团队可以覆盖更多平台。
  • 业务 UI 变更可同步到多端。

共享 UI 的代价：

  • 平台特有体验可能需要额外适配。
  • iOS/Web/桌面目标成熟度和生态不同。
  • 团队需要理解 Compose 运行模型。
  • 与原生控件、系统能力、无障碍、输入法等交互要测试。

Java 开发者视角

Java Swing/JavaFX 也是 JVM UI 技术，但 Compose Multiplatform 的模型完全不同：

  • UI 是函数式声明，而不是手动持有控件对象。
  • 状态驱动 UI，而不是命令式更新控件。
  • 组合优于继承，不会写大量 extends JPanel。
  • 跨平台目标不局限于 JVM。

如果你来自 Java 后端，学习 Compose 前应先理解 Kotlin 函数、Lambda、不可变状态和协程。

推荐架构

一个相对稳妥的分层：

domain: 纯业务模型和规则
data: API、缓存、repository
presentation: state、intent、view model
ui: Compose 组件
platform: 平台入口和能力适配

尽量让 domain 和 data 不依赖 UI 框架。这样即使未来某个平台不共享 UI，核心逻辑仍可复用。

实践建议

  • 新项目可以从单个共享模块和一个目标开始，不要一次覆盖所有平台。
  • 优先共享业务 UI 和状态逻辑，平台强相关体验保留适配层。
  • Web 目标要单独验证性能、浏览器兼容和发布体积。
  • iOS 目标要从 Swift 调用体验、生命周期和平台集成角度测试。
  • 不要把 Compose 组件直接变成业务逻辑容器，业务规则仍应下沉到 domain 层。

参考

  • 官方 Compose Multiplatform：https://kotlinlang.org/docs/multiplatform/compose-multiplatform.html
  • 官方 Kotlin/Wasm + Compose 入门：https://kotlinlang.org/docs/wasm-get-started.html