Skip to content

跨平台 (Multiplatform)

源:Compose Multiplatform

Compose Multiplatform (CMP) 是由 JetBrains 基于 Google 的 Jetpack Compose 构建的声明式 UI 框架。它允许你在 Android、iOS、Desktop (Windows/macOS/Linux) 和 Web (Wasm) 上共享 UI 代码。

1. 架构原理

CMP 不是“翻译”代码(像 React Native 或 Flutter),而是原生绘制

  • Android: 基于 Android Canvas。
  • iOS: 基于 Skia 图形库(类似 Flutter 引擎),通过 ComposeUIViewController 嵌入到 iOS 原生视图层级中。
  • Desktop: 基于 Skia (Skiko)。

这意味着你的 UI 代码(Kotlin)是 100% 共享的。

2. 项目结构

text
├── commonMain/         # 共享代码 (UI, ViewModel, Domain)
│   └── kotlin/
│       └── App.kt      # @Composable fun App()
├── androidMain/        # Android 特有代码
├── iosMain/            # iOS 特有代码
├── desktopMain/        # 桌面特有代码

4. Gradle 配置 (快速参考)

在根目录 build.gradle.kts 中应用插件:

kotlin
plugins {
    alias(libs.plugins.kotlinMultiplatform) apply false
    alias(libs.plugins.jetbrainsCompose) apply false
    alias(libs.plugins.compose.compiler) apply false
}

在共享模块中:

kotlin
plugins {
    alias(libs.plugins.kotlinMultiplatform)
    alias(libs.plugins.jetbrainsCompose)
    alias(libs.plugins.compose.compiler)
}

kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation(compose.runtime)
            implementation(compose.foundation)
            implementation(compose.material3) // 共享 UI 组件
            implementation(compose.components.resources) // 共享资源支持
        }
    }
}

5. 期望与实际 (expect / actual)

当需要调用平台特有 API(如获取电池电量、UUID)时,使用 Kotlin Multiplatform 的机制。

kotlin
// commonMain
@Composable
expect fun PlatformText()

// androidMain
@Composable
actual fun PlatformText() {
    Text("Running on Android")
}

// iosMain
@Composable
actual fun PlatformText() {
    Text("Running on iOS")
}

4. 资源共享

从 CMP 1.6.0 开始,支持在 commonMain/resources 中存放图片、字体和字符串,并自动生成访问代码。

kotlin
Image(
    painter = painterResource(Res.drawable.my_image),
    contentDescription = null
)

5. 迁移指南

如果你已经有一个标准的 Android Compose 项目,迁移到 CMP 通常只需要:

  1. 安装 Kotlin Multiplatform Mobile (KMM) 插件。
  2. 重构 Gradle 脚本,引入 CMP 插件。
  3. 将 UI 代码从 app/src/main/java 移动到 shared/src/commonMain/kotlin
  4. R.string 替换为 CMP 的资源机制。