【Jetpack Compose 娓娓道来】第14课：Compose Multiplatform与生态——从Android走向多端

一、回顾与引入前十三课我们一路走来从Compose的基本概念、布局、状态、列表、导航、主题、动画手势、自定义绘制到与View互操作、性能优化、测试调试、架构分层再到协程的深度结合基本上把Android平台上的Compose开发从头到尾走了一遍。你现在已经是一个合格的Compose开发者了。但技术人的好奇心不会止步于一个平台。你可能会问既然Compose用Kotlin写UI这么舒服能不能用它写iOS写桌面写Web答案是能。这就是这一课要讲的主角——Compose Multiplatform。Compose Multiplatform是JetBrains基于Jetpack Compose打造的跨平台UI框架。它让你用同一套Kotlin代码在Android、iOS、桌面Windows/macOS/Linux和Web上构建原生UI。到2026年iOS端的Compose Multiplatform已经稳定并达到生产就绪状态Web端也进入了Beta支付宝甚至开源了基于KMPCMP的三端方案。这一课我们就来搞清楚Compose Multiplatform是什么、它和Jetpack Compose什么关系、各平台的支持现状、工程结构怎么搭、平台差异怎么处理、第三方库生态有哪些、以及生产环境中的真实案例。最后再聊聊Compose的路线图和未来。二、Compose Multiplatform是什么2.1 一句话定义Compose Multiplatform简称CMP是一个基于Kotlin的跨平台声明式UI框架。它把Compose的核心思想——可组合函数、状态驱动UI、重组机制——从Android扩展到了iOS、桌面和Web。你可以把它理解为Compose的“通用版”。你在Android上学到的所有Compose知识——Column、Row、Modifier、remember、mutableStateOf、LaunchedEffect——在CMP里几乎原封不动地适用。唯一的区别是有些API只在特定平台可用平台专属能力需要通过适配层处理。2.2 与Jetpack Compose的关系这是最容易混淆的地方。用一句话说清楚Jetpack Compose是Android官方的UI工具包目标是Android。Compose Multiplatform是JetBrains基于Compose核心思想构建的跨平台框架目标是Android、iOS、桌面和Web。它们共享很多概念Composable函数、状态驱动UI、remember、Modifier、Material风格组件、预览和重组机制。但它们的目标不同Jetpack ComposeCompose Multiplatform开发者GoogleJetBrains目标平台AndroidAndroid、iOS、桌面、Web共享代码仅AndroidcommonMain中的代码可跨平台复用平台API可直接使用Android SDK共享代码不能依赖Android专属API生态Android JetpackKMP生态 部分Jetpack移植一个重要的细节Compose Multiplatform的Android实现底层用的就是Jetpack Compose。所以你在Android上写的Compose代码放到CMP的androidMain里完全兼容。2.3 为什么不是“把Android View搬到其他平台”CMP不是让所有平台完全共用同一份应用代码。更准确地说它提供了一套跨平台的Compose Runtime、UI组件模型和渲染能力。你可以用Kotlin写共享界面和状态逻辑再在不同平台接入各自的入口、权限、生命周期和系统能力。涉及相机、定位、通知、文件选择、系统分享、支付、推送等能力时通常要通过平台适配层实现。共享层定义能力接口平台层提供具体实现。三、各平台支持现状到2026年Compose Multiplatform的各平台支持情况如下3.1 Android完全成熟CMP的Android实现就是Jetpack Compose。你在前十三课学的一切都直接适用。3.2 iOS稳定生产就绪2025年5月面向iOS的Compose Multiplatform达到了稳定、生产就绪的里程碑。到2026年iOS端的表现已经相当成熟1.7.0版本配合Kotlin 2.0.20在iOS上的性能大幅提升。LazyGrid滚动性能平均提升约9%VisualEffects基准测试快了3.6倍AnimatedVisibility快了约6%。1.11.0版本引入了基于UIView的原生文本输入实现实验性让输入框的手感更接近iOS原生支持原生手势、选择手柄和系统上下文菜单。并发渲染也默认开启渲染任务被卸载到专用渲染线程。3.3 桌面稳定桌面端Windows、macOS、Linux的CMP已经稳定。1.10.0版本为桌面端和iOS的原生互操作元素增加了自动调整大小功能元素可以根据内容自适应布局。Compose Hot Reload在桌面端默认启用改代码即时看到效果。3.4 WebBeta2026年2月发布的1.9.0版本中Compose Multiplatform for Web进入了Beta由Wasm驱动。1.11.0版本大幅改进了Web端的触摸处理和滚动性能滚动体验已经接近其他平台。3.5 一套代码多端运行在2026年CMP已经可以在iOS、Android、macOS、Windows、Linux和Web上运行是一个真正的跨平台UI框架。四、工程结构共享什么不共享什么4.1 标准的多平台工程结构一个典型的Compose Multiplatform项目结构如下composeApp/ src/ commonMain/ kotlin/ App.kt // 共享的根Composable feature/ // 共享的功能模块 ui/ // 共享的UI组件 data/ // 共享的数据层 androidMain/ kotlin/ MainActivity.kt // Android入口 iosMain/ kotlin/ MainViewController.kt // iOS入口 desktopMain/ kotlin/ main.kt // 桌面入口 webMain/ kotlin/ main.kt // Web入口commonMain放可共享的Composable、状态管理、业务模型、Repository接口和通用工具。androidMain、iosMain、desktopMain、webMain放平台入口和平台专属实现。4.2 依赖方向共享层定义能力平台层提供实现这种结构的关键是依赖方向。共享层定义能力接口平台层提供具体实现。不要让commonMain直接依赖Android的Context、Activity、Uri或资源访问方式否则代码很快会失去跨平台意义。4.3 从一个共享的App开始共享UI通常从一个根Composable开始// commonMainComposablefunApp(){MaterialTheme{varcountbyrememberSaveable{mutableStateOf(0)}Column(modifierModifier.fillMaxSize().padding(24.dp),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(计数$count)Button(onClick{count}){Text(加一)}}}}然后各平台只需要调用App()// androidMainclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{App()}}}// desktopMainfunmain()application{Window(onCloseRequest::exitApplication){App()}}五、平台差异处理expect/actual这是KMPKotlin Multiplatform提供的核心机制。当某个能力在不同平台有不同的实现时在commonMain用expect声明在各平台的源集中用actual实现。// commonMainexpectfungetPlatformName():String// androidMainactualfungetPlatformName():StringAndroid// iosMainactualfungetPlatformName():StringiOS// desktopMainactualfungetPlatformName():StringDesktop在Compose里expect/actual常用于平台专属的UI组件如iOS的日期选择器平台专属的权限请求平台专属的文件选择器平台专属的通知5.1 在Compose中使用expect/actual// commonMainComposableexpectfunPlatformSpecificButton(text:String,onClick:()-Unit)// androidMainComposableactualfunPlatformSpecificButton(text:String,onClick:()-Unit){Button(onClickonClick){Text(text)}}// iosMainComposableactualfunPlatformSpecificButton(text:String,onClick:()-Unit){// 用iOS风格的按钮Button(onClickonClick){Text(text)}}六、第三方库生态6.1 Coil图片加载Coil是Compose Multiplatform上最推荐的图片加载库。它支持Android和CMP提供AsyncImage和rememberAsyncImagePainter。// commonMainAsyncImage(modelhttps://example.com/image.jpg,contentDescriptionnull,modifierModifier.size(200.dp))注意Accompanist-Coil已经废弃从v0.14开始推荐直接使用Coil的Compose扩展库io.coil-kt:coil-compose。6.2 AccompanistCompose的“实验室”Accompanist是Google维护的Compose扩展库用于填补Compose工具包中的已知空白实验新功能。它包含权限accompanist-permissions把权限状态映射到Compose UI。Pageraccompanist-pager提供ViewPager类似的翻页组件。FlowLayout自动换行的布局。System UI Controller控制系统状态栏和导航栏颜色。Accompanist的部分功能会逐步融入官方Compose工具包。6.3 其他常用库Voyager / DecomposeCMP上的导航库因为Navigation Compose在CMP上的支持还在完善中。Ktor跨平台网络请求替代Retrofit。SQLDelight跨平台数据库替代Room。Koin / Kodein跨平台依赖注入替代HiltHilt目前不直接支持CMP。七、生产案例Compose Multiplatform已经在生产环境中被广泛使用。几个值得关注的案例支付宝MYKMP支付宝正式开源了基于KMP和CMP的三端原生跨平台方案MYKMP。业务逻辑与Compose UI一次编写即可在Android、iOS、HarmonyOS三端复用。Instabee将Android应用逻辑和UI迁移到KMPCMP通过有效利用Android代码库在短时间内发布了iOS应用。Respawn Pro一个习惯追踪和生产力应用其iOS应用用CMP构建与Android共享96%的代码。JetBrains官方也指出KMPCMP已经成为构建现代跨平台应用的可信赖方案从小型创业公司到大型企业都在采用。八、适合什么场景Compose Multiplatform适合这些类型的项目工具类应用笔记、待办、Markdown编辑器、数据看板。中后台或桌面管理端页面结构稳定交互主要是表单、列表、筛选、编辑。Android团队主导的多端尝试团队已有Kotlin和Compose经验。产品UI在多个平台高度一致不需要大量平台原生交互。内部工具或新业务验证希望快速覆盖桌面端和移动端。它不太适合一开始就强行覆盖所有场景。如果应用高度依赖平台原生体验——复杂视频编辑、地图深度交互、系统级能力、强平台风格页面——跨平台共享UI的收益可能会被适配成本抵消。九、Compose路线图2026根据Google官方路线图Jetpack Compose的未来方向包括核心库Material 3滚动条Material 3 Expressive组件稳定化自适应组件FlexBox布局实验性网格布局实验性Foundation拖拽支持Lazy布局中AnchoredDraggable稳定化网格渐变Mesh gradients图形矢量缓存改进高级图形效果阴影改进文本多样式文本编辑可变字体支持智能文本选择和Linkify自动文字大小适配动画共享元素过渡LazyList项动画高级布局动画编译器与运行时SlotTable重写LazyList调度/线程利用率优化强跳过模式多线程调度器支持一个值得注意的里程碑从Compose 1.9.0开始滚动性能以卡顿为指标已经与View持平。十、Compose Multiplatform路线图2026JetBrains的CMP也在快速迭代。从1.7.0到1.12.0几个关键版本带来的变化1.7.02026年5月更多组件进入common code类型安全导航iOS性能显著提升。1.8.22026年2月全面迁移到K2编译器要求Kotlin 2.1.0。1.9.02026年2月Web端进入BetaWasm驱动。1.10.02026年5月互操作视图自动调整大小统一PreviewNavigation 3Stable Compose Hot Reload。1.11.02026年5月iOS原生文本输入并发渲染默认开启Compose UI测试v2。1.12.02026年8月AI助手工具MCP服务器Web资源管理改进桌面窗口状态控制。十一、常见陷阱11.1 在commonMain里使用Android专属API// 错误commonMain不能依赖Android SDKimportandroid.content.ContextComposablefunBad(){valcontextLocalContext.current// 不存在}用expect/actual把平台专属能力抽象出来。11.2 忘记配置各平台的入口CMP项目需要在每个平台的源集中配置入口MainActivity、MainViewController、main()等否则无法运行。11.3 依赖版本不兼容CMP版本和Kotlin版本有严格的兼容性要求。1.8.0要求Kotlin 2.1.0。升级时要注意同步更新。11.4 误以为所有Compose库都跨平台不是所有Android Compose库都支持CMP。用之前检查库的文档确认是否支持commonMain。11.5 忽略平台差异CMP的目标不是“消灭平台差异”而是“把差异放在合适的位置”。强行让所有平台看起来一模一样往往导致体验变差。十二、小结与下一课预告这一课我们把Compose的视野从Android扩展到了多平台。关键点回顾Compose Multiplatform是JetBrains基于Jetpack Compose构建的跨平台UI框架支持Android、iOS、桌面和Web。与Jetpack Compose的关系共享核心概念但目标不同。CMP的Android实现就是Jetpack Compose。各平台现状Android完全成熟iOS稳定生产就绪桌面稳定Web Beta。工程结构commonMain放共享代码各平台源集放入口和平台专属实现。平台差异处理用expect/actual声明和实现平台专属能力。第三方库Coil图片、Accompanist实验性扩展、Ktor网络、SQLDelight数据库。生产案例支付宝MYKMP、Instabee、Respawn Pro等。适合场景工具类、中后台、UI高度一致的多端项目。路线图Compose 1.9.0滚动性能已追平ViewCMP在快速迭代Web和iOS持续改进。下一课也是这个系列的最后一课我们会做一个综合项目实战。把前十四课学到的所有知识——布局、状态、导航、主题、动画、列表、架构、协程、测试——全部串起来从零构建一个完整的、有生产级质量的Compose应用。我们会涵盖需求分析、架构设计、模块拆分、UI实现、状态管理、数据层、依赖注入、测试、性能优化。这是对整个系列的总结和升华。课后练习建议如果你对跨平台感兴趣可以试着把你之前写的一个Compose页面迁移到Compose Multiplatform看看需要在哪些地方做平台适配。如果你只关注Android可以把这一课当作“视野扩展”了解一下Compose的更大图景。