从零开始了解 Compose Multiplatform – wiki基地

作者： /

从零开始，全面了解 Compose Multiplatform

在当今这个多屏时代，用户在智能手机、平板电脑、桌面电脑甚至网页上与应用进行交互。对于开发者而言，为每个平台构建原生应用意味着巨大的工作量：需要不同的语言（Kotlin/Java for Android, Swift/Objective-C for iOS, JavaScript for Web, C#/C++ for Desktop）、不同的UI框架、不同的开发团队和维护成本。这无疑是一个巨大的挑战。

传统的解决方案通常是雇佣多个平台的开发团队，或者采用一些跨平台框架，比如 React Native 或 Flutter。这些框架各有优缺点，但很多时候，开发者仍然需要在性能、原生体验、代码共享程度或特定平台API的访问等方面做出权衡。

正是在这样的背景下，JetBrains 公司，作为 Kotlin 语言的创造者和开发者工具的领导者，推出了一个革命性的解决方案——Compose Multiplatform (CMP)。它基于 JetBrains 广泛采用的 UI 工具包 Jetpack Compose，并将其能力扩展到 Android 之外的更多平台，旨在让开发者能够使用同一套代码库构建美观、高性能、具有原生体验的跨平台应用。

本文将带你从零开始，深入了解 Compose Multiplatform 是什么，它解决了哪些问题，它的核心概念是什么，以及如何开始你的 Compose Multiplatform 开发之旅。

一、Compose Multiplatform 是什么？核心理念与起源

要理解 Compose Multiplatform，我们首先需要了解它的基石——Jetpack Compose。

1. Jetpack Compose：Android 的现代化 UI 工具包

Jetpack Compose 是 Google 为 Android 开发推出的全新的声明式 UI 工具包。与传统的基于 XML 布局和 View 对象的命令式UI不同，Compose 采用了声明式范式。这意味着你不再需要手动找到一个 View 元素（比如 TextView 或 Button），然后调用它的方法（如 setText() 或 setOnClickListener()）来改变其状态。相反，你只需描述 UI 在给定状态下应该“看起来像什么”，Compose 框架会负责根据状态的变化自动更新 UI。

这种声明式的方式带来了许多优势：
* 代码更少，更直观： UI 的结构和状态变化更容易理解。
* 强大的预览能力： 在 IDE 中可以实时预览 Composable 函数的 UI 效果。
* 更好的性能： 通过智能的重组（recomposition）机制，Compose 只更新真正发生变化的部分 UI。
* 基于 Kotlin： 充分利用 Kotlin 语言的强大特性，如协程、扩展函数等。

Compose 迅速成为 Android 开发社区的主流选择，因其显著提高了开发效率和UI构建的乐趣。

2. 从 Android 到多平台：Compose Multiplatform 的诞生

JetBrains 意识到 Jetpack Compose 这种声明式 UI 范式和其基于 Kotlin 的实现具有巨大的跨平台潜力。为什么不将这套优秀的 UI 构建能力带到 Android 以外的平台呢？

于是，Compose Multiplatform 诞生了。它将 Jetpack Compose 的核心 UI 工具包（包括其声明式 API、状态管理、布局系统、动画等）与 Kotlin Multiplatform (KMP) 技术相结合。

Kotlin Multiplatform (KMP) 是 JetBrains 推出的另一项重要技术，它允许开发者在不同平台（JVM、Android、iOS Native、Desktop Native、WebAssembly/JS 等）之间共享非 UI 的业务逻辑代码。KMP 的核心思想是“共享一切非 UI 的东西”，而平台特定的功能（如访问文件系统、网络请求的具体实现、平台UI等）则通过 expect/actual 机制进行区分实现。

Compose Multiplatform 结合了 KMP 的能力：
* 共享 UI 代码： 大部分的 UI 组件、布局和状态管理逻辑可以使用 Compose API 在 commonMain 模块中编写，并在不同平台（Android, iOS, Desktop, Web）上运行。
* 共享非 UI 逻辑： 数据模型、业务逻辑、网络层、数据库操作等非 UI 代码则通过 Kotlin Multiplatform 的 commonMain 模块共享。
* 平台特定集成： 利用 KMP 的平台模块（如 androidMain, iosMain, desktopMain, webMain），处理平台相关的需求，例如访问原生 API、嵌入原生 View 等。

核心理念： CMP 的核心理念是最大化代码共享，尤其是在 UI 层，同时保留平台原生的能力和体验。它不是简单地在所有平台上绘制完全相同的像素（尽管它可以做到），而是在每个平台上利用其底层的图形渲染能力和集成其平台特性，以达到既高效又“感觉原生”的效果。

二、Compose Multiplatform 的技术基石与工作原理

了解 CMP 的工作原理有助于理解它的优势和限制。

1. Kotlin Multiplatform 作为基础

CMP 构建在 Kotlin Multiplatform 项目之上。一个典型的 CMP 项目会包含多个模块：
* commonMain: 存放所有平台共享的代码，包括大部分 UI Composable 函数、数据模型、业务逻辑等。
* androidMain: 存放 Android 平台特有的代码，如 Application 类、Activity、访问 Android API 的具体实现等。
* iosMain: 存放 iOS 平台特有的代码，需要能编译成 iOS 原生库（通常通过 Kotlin/Native 编译成 framework 或 Swift package），在 Xcode 项目中引用。
* desktopMain: 存放桌面平台（Windows, macOS, Linux）特有的代码，通常是启动应用的入口点、窗口管理等。
* webMain: 存放 Web 平台特有的代码，通常是单页面应用的入口、与浏览器的交互等。

UI 代码库本身就存放在 commonMain 中，由 CMP 框架负责在不同平台上进行解析和渲染。

2. Skia 图形库：跨平台的秘密武器

Compose Multiplatform 在很大程度上依赖于 Google 的 Skia 图形库（与 Flutter 使用的是同一个库）。Skia 是一个高性能的 2D 图形渲染引擎，能够在多种硬件和软件平台上绘制复杂的图形。

CMP 的渲染流程大致如下：
* Compose UI 代码（用 Composable 函数描述的 UI 树）在 commonMain 中定义。
* Compose 框架解析这个 UI 树和其状态。
* Compose 的布局系统计算每个 UI 元素的位置和大小。
* Compose 的绘制系统生成一系列抽象的绘制命令。
* 这些抽象的绘制命令被传递给 Skia 库。
* Skia 利用底层平台的图形 API（如 OpenGL, Vulkan, Metal, DirectX 或软件渲染）将这些绘制命令转换成实际的像素，并显示在屏幕上。

通过 Skia，Compose Multiplatform 实现了跨平台的统一渲染，而无需依赖平台原生的 UI 控件（比如 Android 的 Button 或 iOS 的 UIButton）。这使得开发者能够构建高度定制的 UI，并在不同平台上保持一致的视觉效果，同时依然能获得接近原生的性能，因为它直接利用了 GPU 加速。

3. 平台特定的后端

虽然 UI 绘制由 Skia 统一处理，但每个平台都有其独特的窗口管理、输入事件处理、系统服务访问（如剪贴板、通知、权限等）方式。Compose Multiplatform 为每个平台提供了相应的“后端”或集成层：

  • Android: 直接使用 Jetpack Compose 的 Android 后端，与 Android Activity/Fragment 集成。
  • Desktop: 使用 Skia 结合桌面窗口系统（如 AWT/Swing, SWT, or custom backends）来创建窗口和处理鼠标、键盘事件。
  • iOS: 使用 Kotlin/Native 将 Compose 代码编译成原生库，并在 Xcode 项目中通过 Swift/Objective-C 代码启动 Compose UI 框架。Compose UI 会被嵌入到原生的 UIView/UIViewController 中。输入事件（触摸、手势）从原生层传递给 Compose。
  • Web: 目前主要有两个后端：基于 Canvas 的 Web/Wasm 后端（利用 Skia WebAssembly 编译绘制到 Canvas 上）和基于 DOM 的 Web/JS 后端（将 Composable 映射到 HTML DOM 元素，仍在实验中）。Canvas 后端更适合需要像素级控制和复杂动画的应用，而 DOM 后端可能更适合传统的网页应用结构。

这种分层的架构——KMP 提供基础和非 UI 共享，Compose 提供 UI 框架和渲染逻辑，平台后端处理系统集成——是 Compose Multiplatform 强大的关键。

三、Compose Multiplatform 的主要优势

Compose Multiplatform 提供了一系列吸引人的优势，使其成为多平台开发的有力竞争者：

  1. 最大化代码共享： 这是最显著的优势。UI 代码（Composables）、业务逻辑、数据层等绝大部分代码可以在 commonMain 模块中共享，大幅减少了重复工作。JetBrains 估计，在一个典型的应用中，可以共享 60%-90% 的代码，有些甚至可以达到 99%。
  2. 原生体验和性能： CMP 利用 Skia 直接在每个平台上进行渲染，并与平台底层图形 API 深度集成。它不依赖于平台的原生 UI 控件，但其绘制是高效且硬件加速的。同时，通过与平台后端的集成，CMP 应用能够无缝处理平台特有的事件（如手势、滚动物理效果、窗口管理），并能轻松访问平台原生 API，从而提供接近原生的用户体验和高性能。它不是在所有平台上看起来“一样”，而是感觉上“融入”了每个平台。
  3. 基于 Kotlin 的强大开发体验： 开发者可以利用 Kotlin 语言的现代特性、协程、流等构建健壮、可维护的代码。与 Jetpack Compose 类似，CMP 提供了强大的 IDE 支持（智能代码补全、重构、调试、预览等），极大地提高了开发效率。
  4. 类型安全的 UI： Compose 的声明式 API 本身就是类型安全的，减少了运行时错误。
  5. 统一的 UI 范式： 学习并掌握一套声明式 UI 范式（Compose）就可以应用于多个平台，降低了学习成本，使得团队协作更加高效。
  6. 与原生代码的互操作性： CMP 可以轻松地在现有原生应用中嵌入（作为 View 或 Activity/ViewController 的一部分），也可以在 CMP 应用中调用平台原生 API 或使用平台原生 View。这使得渐进式迁移或混合开发成为可能。
  7. 活跃的社区和强大的背后支持： JetBrains 和 Google 在持续投入资源开发和改进 Compose Multiplatform，其社区也在不断壮大。

四、Compose Multiplatform 的潜在挑战与考虑

虽然优势显著，但在选择 CMP 之前，也需要了解它可能带来的挑战：

  1. 平台成熟度差异： Android 和 Desktop 平台支持相对成熟稳定。iOS 支持（特别是与 SwiftUI/UIKit 的互操作性、构建流程）正在快速发展，但相较于 Android 可能仍有些地方需要完善。Web 平台（尤其是基于 Canvas 的渲染）的成熟度相对较低，更适合特定类型的应用（如游戏、数据可视化等），传统的网页应用可能需要考虑 DOM 后端，但该后端尚在实验阶段。
  2. 生态系统和第三方库： 尽管 Kotlin Multiplatform 和 Compose Multiplatform 的生态正在增长，但与 Android/iOS 原生、Web 前端或 Flutter 等成熟平台相比，可用的跨平台第三方库数量可能较少。尤其是一些高度依赖原生平台能力的库（如相机、蓝牙、支付等），你可能需要自己编写平台特定的实现，或依赖于一些社区维护的跨平台库。
  3. 构建和部署的复杂性： 构建一个真正的多平台应用（特别是包含 iOS）可能比构建单一平台应用涉及更多的工具链和配置（如 Xcode 设置、Gradle 配置、Kotlin Native 编译等）。
  4. 平台特定行为的处理： 尽管 UI 代码共享，但不同平台的用户习惯和系统行为仍然存在差异。你需要考虑如何在共享代码中优雅地处理这些差异，或者在平台特定模块中进行调整。
  5. 学习曲线： 对于不熟悉 Kotlin 或 Compose 的开发者来说，需要学习这些新技术和声明式 UI 范式。

五、Compose Multiplatform 支持的平台概览

目前，Compose Multiplatform 正式或实验性支持以下平台：

  • Android (JVM): 这是 Compose 的起点，支持度最高，功能最完善。
  • Desktop (JVM): 支持 Windows, macOS, Linux。可以构建传统的桌面应用，支持窗口管理、菜单、系统托盘等。非常适合开发内部工具、小型独立应用等。成熟度高。
  • iOS (Kotlin/Native): 支持在 iOS 设备上运行，通常作为原生 Xcode 项目中的一个 View 或 ViewController 嵌入。性能良好，能够访问原生 API。成熟度较高，但仍在积极发展中。
  • Web (Kotlin/JS 或 Kotlin/Wasm):
    • Canvas (Wasm): 利用 WebAssembly 和 Skia 进行渲染，适合图形密集型应用。成熟度较低，仍在发展中。
    • DOM (JS): 将 Composable 映射到 HTML DOM 元素，更接近传统 Web 开发。目前处于实验阶段。

六、如何开始你的 Compose Multiplatform 之旅

从零开始了解 CMP 后，下一步就是动手实践了。以下是基本的步骤和建议：

  1. 安装必要的工具：

    • IntelliJ IDEA Ultimate 或 Android Studio Electric Eel 或更高版本： JetBrains 的 IDE 对 CMP 支持最好，提供了项目模板、代码补全、调试和预览等功能。推荐使用最新稳定版。
    • JDK： 用于运行 Kotlin 和 Gradle。
    • Android SDK： 如果目标包含 Android 平台。
    • Xcode (macOS): 如果目标包含 iOS 平台，需要在 macOS 上安装 Xcode。
    • Kotlin 插件： 确保你的 IDE 安装了最新版本的 Kotlin 插件。

  2. 创建新项目：

    • 在 IntelliJ IDEA 或 Android Studio 中，选择 “New Project”。
    • 在项目类型中查找 “Compose Multiplatform” 模板。JetBrains 提供了不同类型的模板，例如：
      • Compose Multiplatform Application: 包含 Android, Desktop, iOS (minimal or fully integrated), and Web (experimental) 支持的通用模板。
      • Kotlin Multiplatform Library: 如果你只想构建一个跨平台库（包含 UI 或非 UI）。
    • 选择适合你的需求和目标平台的模板。模板会自动配置好 Gradle 文件和项目结构。

  3. 理解项目结构：

    • 打开新创建的项目，你会看到类似 commonMain, androidMain, iosMain, desktopMain, webMain 的源集（source sets）结构。
    • 大部分共享 UI 代码将位于 commonMain/kotlin 中。例如，你可能会看到一个 App.kt 或 MainView.kt 文件，其中定义了应用的根 Composable 函数。
    • 平台特定的入口点和配置会在各自的平台源集中。例如，Android 的 MainActivity.kt，Desktop 的 main.kt，iOS 项目的 Swift/Objective-C 文件中调用 Compose UI 的部分。

  4. 编写你的第一个 Composable 函数：

    • 在 commonMain/kotlin 中，可以尝试修改或添加一个新的 Composable 函数。

    • 例如，创建一个简单的文本显示：
      “`kotlin
      package com.yourcompany.yourapp

      import androidx.compose.material.Text
      import androidx.compose.runtime.Composable
      import androidx.compose.ui.Modifier

      @Composable
      fun Greeting(name: String) {
      Text(text = “Hello $name!”)
      }
      * 在应用的根 Composable 函数中调用它：kotlin
      @Composable
      fun App() {
      Greeting(“Compose Multiplatform”)
      }
      “`

  5. 在不同平台运行应用：

    • Android: 选择 androidApp 运行配置，连接设备或启动模拟器，点击运行按钮。
    • Desktop: 选择 desktop 运行配置，点击运行按钮，应用会在桌面窗口中启动。
    • iOS: 你需要在 macOS 上使用 IntelliJ IDEA 或 Android Studio，并安装 Xcode。选择 iosApp 或 ios 运行配置。IDE 会构建 Kotlin/Native 库，并在 Xcode 项目中运行（可能需要打开 Xcode 项目文件进行一些设置）。
    • Web: 选择 wasmJs 或 js 运行配置，点击运行按钮。应用会在浏览器中启动（通常会启动一个本地服务器）。

  6. 学习 Compose UI 基础：

    • 虽然目标是多平台，但 UI 开发的核心是 Compose UI 本身。建议花时间学习 Jetpack Compose 的基础知识，如布局（Row, Column, Box）、状态管理（remember, mutableStateOf, ViewModel）、修饰符（Modifier）、列表（LazyColumn, LazyRow）、手势处理、动画等。这些知识大部分都直接适用于 Compose Multiplatform。
    • 查阅 Compose Multiplatform 的官方文档和教程，了解如何在不同平台处理特定的需求。

  7. 处理平台差异：

    • 当你需要访问平台特定的 API（如获取地理位置、使用蓝牙等）时，需要在 commonMain 中使用 expect 关键字声明接口，然后在 androidMain, iosMain 等平台模块中使用 actual 关键字提供具体的实现。
    • 对于一些只需要在特定平台存在的 UI 元素或行为，可以直接在平台模块中编写代码，或者在 commonMain 的 Composable 函数中通过判断当前运行平台来调整 UI。

七、Compose Multiplatform 的典型应用场景

  • 内部工具和业务应用： 这类应用通常不需要极致的 UI 定制或复杂的原生集成，但需要在多个平台（尤其是桌面和移动端）运行。CMP 可以极大地提高开发效率。
  • 创业公司 MVP： 需要快速在多个平台上推出产品原型进行验证的创业公司，CMP 可以帮助他们用更少的资源覆盖更多用户。
  • 现有 Kotlin Multiplatform 项目： 对于已经在使用 KMP 共享业务逻辑的项目，使用 CMP 构建 UI 是一个自然的选择，可以进一步提高代码共享率。
  • 具有跨平台开发团队的公司： 如果公司拥有 Kotlin 开发者，转型到 CMP 可以充分利用现有技能。
  • 需要高度定制 UI 的应用： 由于基于 Skia 绘制而非依赖原生控件，CMP 非常适合需要非标准外观或复杂动画的应用程序。

八、未来展望

Compose Multiplatform 仍在积极发展中。可以预见，未来的发展将集中在：

  • 提高 iOS 和 Web 平台的成熟度和稳定性： 尤其是 Web 平台，Canvas 和 DOM 后端都有很大的发展空间。iOS 的集成体验和互操作性也将持续优化。
  • 完善工具链和开发体验： 进一步简化构建流程，增强调试能力，改进预览功能。
  • 扩大生态系统： 更多高质量的跨平台第三方库将会出现，涵盖更广泛的功能需求。
  • 性能优化： 持续改进渲染效率和内存使用。
  • 支持更多平台： 理论上，CMP 可以被移植到任何支持 Kotlin/Native 或 Kotlin/JVM 的平台，如嵌入式设备等。

九、总结

Compose Multiplatform 是 JetBrains 基于 Kotlin 和 Jetpack Compose 推出的一个令人兴奋的跨平台 UI 框架。它通过最大化代码共享（尤其是在 UI 层）和利用 Skia 实现高效的原生级渲染，为多平台应用开发提供了一个全新的、强大的选择。

从零开始了解 CMP，你需要掌握其核心概念——基于 KMP 的多模块结构、Compose 的声明式 UI 范式以及 Skia 的渲染机制。虽然它仍然面临一些挑战，但凭借 Kotlin 语言的强大、JetBrains 的持续投入以及日益壮大的社区，Compose Multiplatform 有望成为未来多平台开发领域的重要力量。

如果你是一位 Kotlin 开发者，或者正寻求一种高效、高性能、能兼顾原生体验的多平台解决方案，那么深入了解和尝试 Compose Multiplatform 绝对值得。从一个简单的项目模板开始，一步步探索 Composable 的世界，你将发现构建跨平台应用从未如此愉快和高效。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部