Kotlin+Compose+Multiplatform 多端实现指南

🧰 一、环境搭建与项目创建

1. 工具准备

  • IDE：Android Studio 或 IntelliJ IDEA（需安装 Kotlin Multiplatform 插件）
  • Xcode：用于 iOS 编译（macOS 必备）
  • JDK 11+：基础开发环境
  • 关键配置：
    # gradle.properties
kotlin.native.cacheKind=none # 避免 iOS 编译缓存问题

2. 创建项目

使用 Kotlin Multiplatform Wizard 生成项目模板（勾选 Compose Multiplatform 支持）：

./gradlew createMultiplatformProject --template=compose-multiplatform

🗂️ 二、项目结构与核心模块

1. 标准目录结构

shared/
  src/
    commonMain/      # 公共代码（Compose UI、ViewModel、业务逻辑）
    androidMain/     # Android 平台特定代码
    iosMain/         # iOS 平台特定代码
    desktopMain/     # 桌面端代码
androidApp/          # Android 应用模块
iosApp/              # iOS Xcode 项目
desktopApp/          # 桌面端启动模块

关键原则：业务逻辑和 UI 组件优先置于 commonMain 实现跨平台共享。

🧩 三、编写共享代码

1. 跨平台 Compose UI

// shared/src/commonMain/kotlin/SharedUI.kt
@Composable
fun Greeting(name: String) {
    Text(
        text = "Hello, $name!",
        modifier = Modifier.padding(16.dp),
        color = Color.Blue
    )
}

2. 平台无关 ViewModel

class SharedViewModel {
    private val _count = mutableStateOf(0)
    val count: State<Int> = _count

    fun increment() { _count.value++ } // 状态管理跨平台共享
}

3. 平台适配机制（expect/actual）

// 公共模块声明 expect
expect fun getPlatformName(): String

// Android 实现
actual fun getPlatformName(): String = "Android"

// iOS 实现
actual fun getPlatformName(): String = "iOS"

作用：解决平台 API 差异（如文件操作、传感器调用）。

📱 四、平台端集成

1. Android 端调用

// androidApp/src/main/kotlin/MainActivity.kt
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme { Greeting("Android") }
        }
    }
}

2. iOS 端集成

// shared/src/iosMain/kotlin/IOSIntegration.kt
fun MainViewController(): UIViewController =
    ComposeUIViewController { Greeting("iOS") } // 嵌入 SwiftUI

3. 桌面端启动

// desktopApp/src/main/kotlin/Main.kt
fun main() = application {
    Window(onCloseRequest = ::exitApplication) {
        Greeting("Desktop")
    }
}

🔁 五、状态管理与导航

1. 响应式状态

// 使用 Flow 实现跨平台数据流
@Composable
fun FlowConsumer(flow: Flow<String>) {
    val value by flow.collectAsState(initial = "Loading...")
    Text(text = "Current value: $value")
}

2. 导航方案

sealed class Screen { object Home : Screen(); object Detail : Screen() }

@Composable
fun App() {
    var currentScreen by remember { mutableStateOf<Screen>(Screen.Home) }
    when (currentScreen) {
        is Screen.Home -> HomeScreen { currentScreen = Screen.Detail }
        is Screen.Detail -> DetailScreen { currentScreen = Screen.Home }
    }
}

推荐库：Voyager 或自定义导航栈。

📦 六、资源管理策略

资源类型存放位置访问方式
共享图片/字体commonMain/resourcespainterResource("images/logo.png")
Android 特定资源androidMain/resources@drawable/icon
iOS 特定资源iosMain/resourcesNSDataAsset 手动注册

🚀 七、构建与部署

1. 运行命令

平台命令
AndroidAndroid Studio 直接运行
iOS./gradlew podGen 生成 Xcode 项目后运行
桌面端./gradlew run 或打包为原生安装包

2. 性能优化

  • iOS 编译加速：禁用缓存（kotlin.native.cacheKind=none）
  • 资源懒加载：避免在公共代码中预加载大资源
  • 协程优化：使用 Dispatchers.Default 处理 CPU 密集型任务

💼 八、企业级应用案例

1. Cash App（金融支付）

  • 共享模块：支付逻辑、交易验证、加密货币操作
  • 技术栈：SQLDelight（跨平台数据库）、kotlinx.serialization（数据序列化）
  • 成果：减少 70% 重复代码，错误率同步下降

2. Netflix（部分功能）

  • 共享核心：用户认证、数据分析逻辑
  • 保留原生 UI：Android 用 Jetpack Compose，iOS 用 SwiftUI

💎 总结

核心优势与实践要点

  1. 代码共享最大化
    • 业务逻辑、ViewModel、Compose UI 在 commonMain 实现跨平台复用。
  2. 原生体验保留
    • 不强制统一 UI，Android/iOS 可分别使用 Jetpack Compose 和 SwiftUI。
  3. 渐进式迁移
    • 支持在现有项目中逐步引入 KMP 模块，降低迁移风险。
  4. 性能与生态成熟
    • Kotlin 2.0 后 KMP 已具备生产级稳定性，Compose Multiplatform 持续增强。

推荐路径：新项目直接采用 Compose Multiplatform 实现全平台 UI 共享；旧项目可从业务逻辑层逐步迁移至 KMP。

最后更新: