Compose Multiplatform 教程：从零到一 – wiki大全

作者： /

Compose Multiplatform 教程：从零到一

Compose Multiplatform (CMP) 是 JetBrains 开发的一款声明式 UI 框架，它基于 Google 的 Jetpack Compose，旨在让开发者能够跨不同平台（包括 Android、iOS、桌面应用和 Web）共享 Kotlin UI 代码。这意味着您不仅可以共享业务逻辑，还可以共享用户界面，从而显著提高代码复用率、确保跨设备用户体验的一致性，并有效降低开发和维护成本。

本文将带领您从零开始，一步步了解 Compose Multiplatform，并构建一个简单的跨平台应用程序。

1. 准备工作：所需工具和软件

在开始 Compose Multiplatform 开发之前，请确保您的开发环境已配置妥当：

  • IntelliJ IDEA (Community 或 Ultimate) 或 Android Studio: 这些集成开发环境 (IDE) 为 Kotlin Multiplatform 开发提供了强大的支持。
  • JDK 17 或更高版本: 运行 Kotlin 项目的必需组件。
  • Kotlin Multiplatform 插件: 在您选择的 IDE 中安装此插件。
  • Xcode (适用于 iOS 目标): 如果您计划开发 iOS 应用程序，则需要一台安装了 Xcode 的 macOS 设备，用于处理 iOS 特定的模拟器和 SDK。
  • kdoctor (可选，macOS 推荐): 在 macOS 上，可以使用 kdoctor 工具检查您的环境设置是否存在潜在问题。

2. 创建您的第一个 Compose Multiplatform 项目

最简单的 Compose Multiplatform 项目创建方式是使用官方的 Kotlin Multiplatform Wizard：

  1. 访问向导: 打开网页浏览器，访问 kmp.jetbrains.com。
  2. 配置项目:
    • 提供项目名称和 ID。
    • 选择您希望支持的平台（例如，Android、iOS、Desktop 和 Web）。
    • 务必勾选 “Share UI” 选项，以便利用 Compose Multiplatform 共享 UI 代码。
  3. 下载并打开: 下载生成的项目 ZIP 文件，然后使用 IntelliJ IDEA 或 Android Studio 打开它。

项目打开后，您会注意到典型的项目结构：

  • composeApp: 这是应用程序的根模块。
    • commonMain: 包含所有目标平台共享的代码（包括业务逻辑和 UI）。目标是将尽可能多的代码放在这里。
    • 平台特定模块（例如 androidMain, iosMain, desktopMain, wasmJsMain): 这些模块用于存放平台特定的 Kotlin 代码或无法共享的依赖项。

3. 构建一个简单的计数器应用

接下来，我们将在 commonMain 模块中构建一个简单的计数器应用程序，以演示共享 UI 的开发：

3.1 定义共享业务逻辑

在 commonMain/kotlin/com/example/projectname 目录下创建一个 Counter.kt 文件，并添加以下代码：

“`kotlin
// commonMain/kotlin/com/example/projectname/Counter.kt
package com.example.projectname

class Counter {
private var count = 0

fun increment() = ++count
fun decrement() = --count
fun value() = count

}
“`

3.2 构建 Compose UI

在 commonMain/kotlin/com/example/projectname 目录下创建一个 App.kt 文件，并添加以下 Composable 函数来显示和操作计数器：

“`kotlin
// commonMain/kotlin/com/example/projectname/App.kt
package com.example.projectname

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*

@Composable
fun App() {
// 使用 remember 和 mutableStateOf 来管理计数器状态
// rememberSaveable for Android and iOS when state needs to survive process death/activity recreation
// For simplicity, we are using remember here.
var counter by remember { mutableStateOf(Counter()) }
val value = remember { mutableStateOf(counter.value()) }

MaterialTheme {
    Column {
        Text("Count: ${value.value}", style = MaterialTheme.typography.h5)
        Row {
            Button(onClick = { value.value = counter.increment() }) {
                Text("Increment")
            }
            Button(onClick = { value.value = counter.decrement() }) {
                Text("Decrement")
            }
        }
    }
}

}
“`

4. 运行您的应用程序

您可以直接从 IDE 中运行您的 Compose Multiplatform 应用程序，并将其部署到不同的目标平台：

  • Android: 在 Android Studio 中，选择一个 Android 设备或模拟器，然后点击运行按钮。
  • iOS: 在 macOS 设备上，从 Android Studio 或 IntelliJ IDEA 的运行配置中选择一个 iOS 模拟器，然后点击运行。这需要安装和配置 Xcode。
  • 桌面应用: 导航到 desktopMain 源集中的 Main.kt 文件，然后点击 main() 函数旁边的运行按钮。

5. 核心概念与下一步学习

  • expect 和 actual 声明: 对于平台特定的实现（例如，访问原生 API 或不同的数据库驱动），Compose Multiplatform 使用 commonMain 中的 expect 声明和平台特定模块中的 actual 实现。
  • 导航: Compose Multiplatform 提供了一个多平台导航库，用于在您的应用中实现导航功能。
  • 资源和本地化: 您可以管理和共享通用资源，并使您的 UI 适应不同的语言和地区。
  • 互操作性: Compose Multiplatform 允许轻松访问原生 API 和嵌入复杂的原生 UI 视图（例如，iOS 上的 SwiftUI 互操作性）。

为了更深入地理解，建议您查阅官方 Compose Multiplatform 文档、示例项目以及在线提供的各种视频教程。

结语

Compose Multiplatform 为开发者提供了一种强大而高效的方式来构建真正的跨平台应用程序，通过共享 UI 和业务逻辑，极大地提升了开发效率和代码一致性。从零开始，通过本文的指导，您应该已经成功迈出了 Compose Multiplatform 开发的第一步。现在，是时候探索更多功能并构建您自己的精彩应用了！

滚动至顶部