——從Android走向多端)
一、回顧與引入前十三課我們一路走來從Compose的基本概念、布局、狀態(tài)、列表、導(dǎo)航、主題、動(dòng)畫手勢(shì)、自定義繪制到與View互操作、性能優(yōu)化、測(cè)試調(diào)試、架構(gòu)分層再到協(xié)程的深度結(jié)合基本上把Android平臺(tái)上的Compose開發(fā)從頭到尾走了一遍。你現(xiàn)在已經(jīng)是一個(gè)合格的Compose開發(fā)者了。但技術(shù)人的好奇心不會(huì)止步于一個(gè)平臺(tái)。你可能會(huì)問既然Compose用Kotlin寫UI這么舒服能不能用它寫iOS寫桌面寫Web答案是能。這就是這一課要講的主角——Compose Multiplatform。Compose Multiplatform是JetBrains基于Jetpack Compose打造的跨平臺(tái)UI框架。它讓你用同一套Kotlin代碼在Android、iOS、桌面Windows/macOS/Linux和Web上構(gòu)建原生UI。到2026年iOS端的Compose Multiplatform已經(jīng)穩(wěn)定并達(dá)到生產(chǎn)就緒狀態(tài)Web端也進(jìn)入了Beta支付寶甚至開源了基于KMPCMP的三端方案。這一課我們就來搞清楚Compose Multiplatform是什么、它和Jetpack Compose什么關(guān)系、各平臺(tái)的支持現(xiàn)狀、工程結(jié)構(gòu)怎么搭、平臺(tái)差異怎么處理、第三方庫(kù)生態(tài)有哪些、以及生產(chǎn)環(huán)境中的真實(shí)案例。最后再聊聊Compose的路線圖和未來。二、Compose Multiplatform是什么2.1 一句話定義Compose Multiplatform簡(jiǎn)稱CMP是一個(gè)基于Kotlin的跨平臺(tái)聲明式UI框架。它把Compose的核心思想——可組合函數(shù)、狀態(tài)驅(qū)動(dòng)UI、重組機(jī)制——從Android擴(kuò)展到了iOS、桌面和Web。你可以把它理解為Compose的“通用版”。你在Android上學(xué)到的所有Compose知識(shí)——Column、Row、Modifier、remember、mutableStateOf、LaunchedEffect——在CMP里幾乎原封不動(dòng)地適用。唯一的區(qū)別是有些API只在特定平臺(tái)可用平臺(tái)專屬能力需要通過適配層處理。2.2 與Jetpack Compose的關(guān)系這是最容易混淆的地方。用一句話說清楚Jetpack Compose是Android官方的UI工具包目標(biāo)是Android。Compose Multiplatform是JetBrains基于Compose核心思想構(gòu)建的跨平臺(tái)框架目標(biāo)是Android、iOS、桌面和Web。它們共享很多概念Composable函數(shù)、狀態(tài)驅(qū)動(dòng)UI、remember、Modifier、Material風(fēng)格組件、預(yù)覽和重組機(jī)制。但它們的目標(biāo)不同Jetpack ComposeCompose Multiplatform開發(fā)者GoogleJetBrains目標(biāo)平臺(tái)AndroidAndroid、iOS、桌面、Web共享代碼僅AndroidcommonMain中的代碼可跨平臺(tái)復(fù)用平臺(tái)API可直接使用Android SDK共享代碼不能依賴Android專屬API生態(tài)Android JetpackKMP生態(tài) 部分Jetpack移植一個(gè)重要的細(xì)節(jié)Compose Multiplatform的Android實(shí)現(xiàn)底層用的就是Jetpack Compose。所以你在Android上寫的Compose代碼放到CMP的androidMain里完全兼容。2.3 為什么不是“把Android View搬到其他平臺(tái)”CMP不是讓所有平臺(tái)完全共用同一份應(yīng)用代碼。更準(zhǔn)確地說它提供了一套跨平臺(tái)的Compose Runtime、UI組件模型和渲染能力。你可以用Kotlin寫共享界面和狀態(tài)邏輯再在不同平臺(tái)接入各自的入口、權(quán)限、生命周期和系統(tǒng)能力。涉及相機(jī)、定位、通知、文件選擇、系統(tǒng)分享、支付、推送等能力時(shí)通常要通過平臺(tái)適配層實(shí)現(xiàn)。共享層定義能力接口平臺(tái)層提供具體實(shí)現(xiàn)。三、各平臺(tái)支持現(xiàn)狀到2026年Compose Multiplatform的各平臺(tái)支持情況如下3.1 Android完全成熟CMP的Android實(shí)現(xiàn)就是Jetpack Compose。你在前十三課學(xué)的一切都直接適用。3.2 iOS穩(wěn)定生產(chǎn)就緒2025年5月面向iOS的Compose Multiplatform達(dá)到了穩(wěn)定、生產(chǎn)就緒的里程碑。到2026年iOS端的表現(xiàn)已經(jīng)相當(dāng)成熟1.7.0版本配合Kotlin 2.0.20在iOS上的性能大幅提升。LazyGrid滾動(dòng)性能平均提升約9%VisualEffects基準(zhǔn)測(cè)試快了3.6倍AnimatedVisibility快了約6%。1.11.0版本引入了基于UIView的原生文本輸入實(shí)現(xiàn)實(shí)驗(yàn)性讓輸入框的手感更接近iOS原生支持原生手勢(shì)、選擇手柄和系統(tǒng)上下文菜單。并發(fā)渲染也默認(rèn)開啟渲染任務(wù)被卸載到專用渲染線程。3.3 桌面穩(wěn)定桌面端Windows、macOS、Linux的CMP已經(jīng)穩(wěn)定。1.10.0版本為桌面端和iOS的原生互操作元素增加了自動(dòng)調(diào)整大小功能元素可以根據(jù)內(nèi)容自適應(yīng)布局。Compose Hot Reload在桌面端默認(rèn)啟用改代碼即時(shí)看到效果。3.4 WebBeta2026年2月發(fā)布的1.9.0版本中Compose Multiplatform for Web進(jìn)入了Beta由Wasm驅(qū)動(dòng)。1.11.0版本大幅改進(jìn)了Web端的觸摸處理和滾動(dòng)性能滾動(dòng)體驗(yàn)已經(jīng)接近其他平臺(tái)。3.5 一套代碼多端運(yùn)行在2026年CMP已經(jīng)可以在iOS、Android、macOS、Windows、Linux和Web上運(yùn)行是一個(gè)真正的跨平臺(tái)UI框架。四、工程結(jié)構(gòu)共享什么不共享什么4.1 標(biāo)準(zhǔn)的多平臺(tái)工程結(jié)構(gòu)一個(gè)典型的Compose Multiplatform項(xiàng)目結(jié)構(gòu)如下composeApp/ src/ commonMain/ kotlin/ App.kt // 共享的根Composable feature/ // 共享的功能模塊 ui/ // 共享的UI組件 data/ // 共享的數(shù)據(jù)層 androidMain/ kotlin/ MainActivity.kt // Android入口 iosMain/ kotlin/ MainViewController.kt // iOS入口 desktopMain/ kotlin/ main.kt // 桌面入口 webMain/ kotlin/ main.kt // Web入口commonMain放可共享的Composable、狀態(tài)管理、業(yè)務(wù)模型、Repository接口和通用工具。androidMain、iosMain、desktopMain、webMain放平臺(tái)入口和平臺(tái)專屬實(shí)現(xiàn)。4.2 依賴方向共享層定義能力平臺(tái)層提供實(shí)現(xiàn)這種結(jié)構(gòu)的關(guān)鍵是依賴方向。共享層定義能力接口平臺(tái)層提供具體實(shí)現(xiàn)。不要讓commonMain直接依賴Android的Context、Activity、Uri或資源訪問方式否則代碼很快會(huì)失去跨平臺(tái)意義。4.3 從一個(gè)共享的App開始共享UI通常從一個(gè)根Composable開始// commonMainComposablefunApp(){MaterialTheme{varcountbyrememberSaveable{mutableStateOf(0)}Column(modifierModifier.fillMaxSize().padding(24.dp),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(計(jì)數(shù)$count)Button(onClick{count}){Text(加一)}}}}然后各平臺(tái)只需要調(diào)用App()// androidMainclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{App()}}}// desktopMainfunmain()application{Window(onCloseRequest::exitApplication){App()}}五、平臺(tái)差異處理expect/actual這是KMPKotlin Multiplatform提供的核心機(jī)制。當(dāng)某個(gè)能力在不同平臺(tái)有不同的實(shí)現(xiàn)時(shí)在commonMain用expect聲明在各平臺(tái)的源集中用actual實(shí)現(xiàn)。// commonMainexpectfungetPlatformName():String// androidMainactualfungetPlatformName():StringAndroid// iosMainactualfungetPlatformName():StringiOS// desktopMainactualfungetPlatformName():StringDesktop在Compose里expect/actual常用于平臺(tái)專屬的UI組件如iOS的日期選擇器平臺(tái)專屬的權(quán)限請(qǐng)求平臺(tái)專屬的文件選擇器平臺(tái)專屬的通知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風(fēng)格的按鈕Button(onClickonClick){Text(text)}}六、第三方庫(kù)生態(tài)6.1 Coil圖片加載Coil是Compose Multiplatform上最推薦的圖片加載庫(kù)。它支持Android和CMP提供AsyncImage和rememberAsyncImagePainter。// commonMainAsyncImage(modelhttps://example.com/image.jpg,contentDescriptionnull,modifierModifier.size(200.dp))注意Accompanist-Coil已經(jīng)廢棄從v0.14開始推薦直接使用Coil的Compose擴(kuò)展庫(kù)io.coil-kt:coil-compose。6.2 AccompanistCompose的“實(shí)驗(yàn)室”Accompanist是Google維護(hù)的Compose擴(kuò)展庫(kù)用于填補(bǔ)Compose工具包中的已知空白實(shí)驗(yàn)新功能。它包含權(quán)限accompanist-permissions把權(quán)限狀態(tài)映射到Compose UI。Pageraccompanist-pager提供ViewPager類似的翻頁(yè)組件。FlowLayout自動(dòng)換行的布局。System UI Controller控制系統(tǒng)狀態(tài)欄和導(dǎo)航欄顏色。Accompanist的部分功能會(huì)逐步融入官方Compose工具包。6.3 其他常用庫(kù)Voyager / DecomposeCMP上的導(dǎo)航庫(kù)因?yàn)镹avigation Compose在CMP上的支持還在完善中。Ktor跨平臺(tái)網(wǎng)絡(luò)請(qǐng)求替代Retrofit。SQLDelight跨平臺(tái)數(shù)據(jù)庫(kù)替代Room。Koin / Kodein跨平臺(tái)依賴注入替代HiltHilt目前不直接支持CMP。七、生產(chǎn)案例Compose Multiplatform已經(jīng)在生產(chǎn)環(huán)境中被廣泛使用。幾個(gè)值得關(guān)注的案例支付寶MYKMP支付寶正式開源了基于KMP和CMP的三端原生跨平臺(tái)方案MYKMP。業(yè)務(wù)邏輯與Compose UI一次編寫即可在Android、iOS、HarmonyOS三端復(fù)用。Instabee將Android應(yīng)用邏輯和UI遷移到KMPCMP通過有效利用Android代碼庫(kù)在短時(shí)間內(nèi)發(fā)布了iOS應(yīng)用。Respawn Pro一個(gè)習(xí)慣追蹤和生產(chǎn)力應(yīng)用其iOS應(yīng)用用CMP構(gòu)建與Android共享96%的代碼。JetBrains官方也指出KMPCMP已經(jīng)成為構(gòu)建現(xiàn)代跨平臺(tái)應(yīng)用的可信賴方案從小型創(chuàng)業(yè)公司到大型企業(yè)都在采用。八、適合什么場(chǎng)景Compose Multiplatform適合這些類型的項(xiàng)目工具類應(yīng)用筆記、待辦、Markdown編輯器、數(shù)據(jù)看板。中后臺(tái)或桌面管理端頁(yè)面結(jié)構(gòu)穩(wěn)定交互主要是表單、列表、篩選、編輯。Android團(tuán)隊(duì)主導(dǎo)的多端嘗試團(tuán)隊(duì)已有Kotlin和Compose經(jīng)驗(yàn)。產(chǎn)品UI在多個(gè)平臺(tái)高度一致不需要大量平臺(tái)原生交互。內(nèi)部工具或新業(yè)務(wù)驗(yàn)證希望快速覆蓋桌面端和移動(dòng)端。它不太適合一開始就強(qiáng)行覆蓋所有場(chǎng)景。如果應(yīng)用高度依賴平臺(tái)原生體驗(yàn)——復(fù)雜視頻編輯、地圖深度交互、系統(tǒng)級(jí)能力、強(qiáng)平臺(tái)風(fēng)格頁(yè)面——跨平臺(tái)共享UI的收益可能會(huì)被適配成本抵消。九、Compose路線圖2026根據(jù)Google官方路線圖Jetpack Compose的未來方向包括核心庫(kù)Material 3滾動(dòng)條Material 3 Expressive組件穩(wěn)定化自適應(yīng)組件FlexBox布局實(shí)驗(yàn)性網(wǎng)格布局實(shí)驗(yàn)性Foundation拖拽支持Lazy布局中AnchoredDraggable穩(wěn)定化網(wǎng)格漸變Mesh gradients圖形矢量緩存改進(jìn)高級(jí)圖形效果陰影改進(jìn)文本多樣式文本編輯可變字體支持智能文本選擇和Linkify自動(dòng)文字大小適配動(dòng)畫共享元素過渡LazyList項(xiàng)動(dòng)畫高級(jí)布局動(dòng)畫編譯器與運(yùn)行時(shí)SlotTable重寫LazyList調(diào)度/線程利用率優(yōu)化強(qiáng)跳過模式多線程調(diào)度器支持一個(gè)值得注意的里程碑從Compose 1.9.0開始滾動(dòng)性能以卡頓為指標(biāo)已經(jīng)與View持平。十、Compose Multiplatform路線圖2026JetBrains的CMP也在快速迭代。從1.7.0到1.12.0幾個(gè)關(guān)鍵版本帶來的變化1.7.02026年5月更多組件進(jìn)入common code類型安全導(dǎo)航iOS性能顯著提升。1.8.22026年2月全面遷移到K2編譯器要求Kotlin 2.1.0。1.9.02026年2月Web端進(jìn)入BetaWasm驅(qū)動(dòng)。1.10.02026年5月互操作視圖自動(dòng)調(diào)整大小統(tǒng)一PreviewNavigation 3Stable Compose Hot Reload。1.11.02026年5月iOS原生文本輸入并發(fā)渲染默認(rèn)開啟Compose UI測(cè)試v2。1.12.02026年8月AI助手工具M(jìn)CP服務(wù)器Web資源管理改進(jìn)桌面窗口狀態(tài)控制。十一、常見陷阱11.1 在commonMain里使用Android專屬API// 錯(cuò)誤commonMain不能依賴Android SDKimportandroid.content.ContextComposablefunBad(){valcontextLocalContext.current// 不存在}用expect/actual把平臺(tái)專屬能力抽象出來。11.2 忘記配置各平臺(tái)的入口CMP項(xiàng)目需要在每個(gè)平臺(tái)的源集中配置入口MainActivity、MainViewController、main()等否則無法運(yùn)行。11.3 依賴版本不兼容CMP版本和Kotlin版本有嚴(yán)格的兼容性要求。1.8.0要求Kotlin 2.1.0。升級(jí)時(shí)要注意同步更新。11.4 誤以為所有Compose庫(kù)都跨平臺(tái)不是所有Android Compose庫(kù)都支持CMP。用之前檢查庫(kù)的文檔確認(rèn)是否支持commonMain。11.5 忽略平臺(tái)差異CMP的目標(biāo)不是“消滅平臺(tái)差異”而是“把差異放在合適的位置”。強(qiáng)行讓所有平臺(tái)看起來一模一樣往往導(dǎo)致體驗(yàn)變差。十二、小結(jié)與下一課預(yù)告這一課我們把Compose的視野從Android擴(kuò)展到了多平臺(tái)。關(guān)鍵點(diǎn)回顧C(jī)ompose Multiplatform是JetBrains基于Jetpack Compose構(gòu)建的跨平臺(tái)UI框架支持Android、iOS、桌面和Web。與Jetpack Compose的關(guān)系共享核心概念但目標(biāo)不同。CMP的Android實(shí)現(xiàn)就是Jetpack Compose。各平臺(tái)現(xiàn)狀A(yù)ndroid完全成熟iOS穩(wěn)定生產(chǎn)就緒桌面穩(wěn)定Web Beta。工程結(jié)構(gòu)commonMain放共享代碼各平臺(tái)源集放入口和平臺(tái)專屬實(shí)現(xiàn)。平臺(tái)差異處理用expect/actual聲明和實(shí)現(xiàn)平臺(tái)專屬能力。第三方庫(kù)Coil圖片、Accompanist實(shí)驗(yàn)性擴(kuò)展、Ktor網(wǎng)絡(luò)、SQLDelight數(shù)據(jù)庫(kù)。生產(chǎn)案例支付寶MYKMP、Instabee、Respawn Pro等。適合場(chǎng)景工具類、中后臺(tái)、UI高度一致的多端項(xiàng)目。路線圖Compose 1.9.0滾動(dòng)性能已追平ViewCMP在快速迭代Web和iOS持續(xù)改進(jìn)。下一課也是這個(gè)系列的最后一課我們會(huì)做一個(gè)綜合項(xiàng)目實(shí)戰(zhàn)。把前十四課學(xué)到的所有知識(shí)——布局、狀態(tài)、導(dǎo)航、主題、動(dòng)畫、列表、架構(gòu)、協(xié)程、測(cè)試——全部串起來從零構(gòu)建一個(gè)完整的、有生產(chǎn)級(jí)質(zhì)量的Compose應(yīng)用。我們會(huì)涵蓋需求分析、架構(gòu)設(shè)計(jì)、模塊拆分、UI實(shí)現(xiàn)、狀態(tài)管理、數(shù)據(jù)層、依賴注入、測(cè)試、性能優(yōu)化。這是對(duì)整個(gè)系列的總結(jié)和升華。課后練習(xí)建議如果你對(duì)跨平臺(tái)感興趣可以試著把你之前寫的一個(gè)Compose頁(yè)面遷移到Compose Multiplatform看看需要在哪些地方做平臺(tái)適配。如果你只關(guān)注Android可以把這一課當(dāng)作“視野擴(kuò)展”了解一下Compose的更大圖景。 【Jetpack Compose 娓娓道來】第14課：Compose Multiplatform與生態(tài)——從Android走向多端
一、回顧與引入前十三課我們一路走來從Compose的基本概念、布局、狀態(tài)、列表、導(dǎo)航、主題、動(dòng)畫手勢(shì)、自定義繪制到與View互操作、性能優(yōu)化、測(cè)試調(diào)試、架構(gòu)分層再到協(xié)程的深度結(jié)合基本上把Android平臺(tái)上的Compose開發(fā)從頭到尾走了一遍。你現(xiàn)在已經(jīng)是一個(gè)合格的Compose開發(fā)者了。但技術(shù)人的好奇心不會(huì)止步于一個(gè)平臺(tái)。你可能會(huì)問既然Compose用Kotlin寫UI這么舒服能不能用它寫iOS寫桌面寫Web答案是能。這就是這一課要講的主角——Compose Multiplatform。Compose Multiplatform是JetBrains基于Jetpack Compose打造的跨平臺(tái)UI框架。它讓你用同一套Kotlin代碼在Android、iOS、桌面Windows/macOS/Linux和Web上構(gòu)建原生UI。到2026年iOS端的Compose Multiplatform已經(jīng)穩(wěn)定并達(dá)到生產(chǎn)就緒狀態(tài)Web端也進(jìn)入了Beta支付寶甚至開源了基于KMPCMP的三端方案。這一課我們就來搞清楚Compose Multiplatform是什么、它和Jetpack Compose什么關(guān)系、各平臺(tái)的支持現(xiàn)狀、工程結(jié)構(gòu)怎么搭、平臺(tái)差異怎么處理、第三方庫(kù)生態(tài)有哪些、以及生產(chǎn)環(huán)境中的真實(shí)案例。最后再聊聊Compose的路線圖和未來。二、Compose Multiplatform是什么2.1 一句話定義Compose Multiplatform簡(jiǎn)稱CMP是一個(gè)基于Kotlin的跨平臺(tái)聲明式UI框架。它把Compose的核心思想——可組合函數(shù)、狀態(tài)驅(qū)動(dòng)UI、重組機(jī)制——從Android擴(kuò)展到了iOS、桌面和Web。你可以把它理解為Compose的“通用版”。你在Android上學(xué)到的所有Compose知識(shí)——Column、Row、Modifier、remember、mutableStateOf、LaunchedEffect——在CMP里幾乎原封不動(dòng)地適用。唯一的區(qū)別是有些API只在特定平臺(tái)可用平臺(tái)專屬能力需要通過適配層處理。2.2 與Jetpack Compose的關(guān)系這是最容易混淆的地方。用一句話說清楚Jetpack Compose是Android官方的UI工具包目標(biāo)是Android。Compose Multiplatform是JetBrains基于Compose核心思想構(gòu)建的跨平臺(tái)框架目標(biāo)是Android、iOS、桌面和Web。它們共享很多概念Composable函數(shù)、狀態(tài)驅(qū)動(dòng)UI、remember、Modifier、Material風(fēng)格組件、預(yù)覽和重組機(jī)制。但它們的目標(biāo)不同Jetpack ComposeCompose Multiplatform開發(fā)者GoogleJetBrains目標(biāo)平臺(tái)AndroidAndroid、iOS、桌面、Web共享代碼僅AndroidcommonMain中的代碼可跨平臺(tái)復(fù)用平臺(tái)API可直接使用Android SDK共享代碼不能依賴Android專屬API生態(tài)Android JetpackKMP生態(tài) 部分Jetpack移植一個(gè)重要的細(xì)節(jié)Compose Multiplatform的Android實(shí)現(xiàn)底層用的就是Jetpack Compose。所以你在Android上寫的Compose代碼放到CMP的androidMain里完全兼容。2.3 為什么不是“把Android View搬到其他平臺(tái)”CMP不是讓所有平臺(tái)完全共用同一份應(yīng)用代碼。更準(zhǔn)確地說它提供了一套跨平臺(tái)的Compose Runtime、UI組件模型和渲染能力。你可以用Kotlin寫共享界面和狀態(tài)邏輯再在不同平臺(tái)接入各自的入口、權(quán)限、生命周期和系統(tǒng)能力。涉及相機(jī)、定位、通知、文件選擇、系統(tǒng)分享、支付、推送等能力時(shí)通常要通過平臺(tái)適配層實(shí)現(xiàn)。共享層定義能力接口平臺(tái)層提供具體實(shí)現(xiàn)。三、各平臺(tái)支持現(xiàn)狀到2026年Compose Multiplatform的各平臺(tái)支持情況如下3.1 Android完全成熟CMP的Android實(shí)現(xiàn)就是Jetpack Compose。你在前十三課學(xué)的一切都直接適用。3.2 iOS穩(wěn)定生產(chǎn)就緒2025年5月面向iOS的Compose Multiplatform達(dá)到了穩(wěn)定、生產(chǎn)就緒的里程碑。到2026年iOS端的表現(xiàn)已經(jīng)相當(dāng)成熟1.7.0版本配合Kotlin 2.0.20在iOS上的性能大幅提升。LazyGrid滾動(dòng)性能平均提升約9%VisualEffects基準(zhǔn)測(cè)試快了3.6倍AnimatedVisibility快了約6%。1.11.0版本引入了基于UIView的原生文本輸入實(shí)現(xiàn)實(shí)驗(yàn)性讓輸入框的手感更接近iOS原生支持原生手勢(shì)、選擇手柄和系統(tǒng)上下文菜單。并發(fā)渲染也默認(rèn)開啟渲染任務(wù)被卸載到專用渲染線程。3.3 桌面穩(wěn)定桌面端Windows、macOS、Linux的CMP已經(jīng)穩(wěn)定。1.10.0版本為桌面端和iOS的原生互操作元素增加了自動(dòng)調(diào)整大小功能元素可以根據(jù)內(nèi)容自適應(yīng)布局。Compose Hot Reload在桌面端默認(rèn)啟用改代碼即時(shí)看到效果。3.4 WebBeta2026年2月發(fā)布的1.9.0版本中Compose Multiplatform for Web進(jìn)入了Beta由Wasm驅(qū)動(dòng)。1.11.0版本大幅改進(jìn)了Web端的觸摸處理和滾動(dòng)性能滾動(dòng)體驗(yàn)已經(jīng)接近其他平臺(tái)。3.5 一套代碼多端運(yùn)行在2026年CMP已經(jīng)可以在iOS、Android、macOS、Windows、Linux和Web上運(yùn)行是一個(gè)真正的跨平臺(tái)UI框架。四、工程結(jié)構(gòu)共享什么不共享什么4.1 標(biāo)準(zhǔn)的多平臺(tái)工程結(jié)構(gòu)一個(gè)典型的Compose Multiplatform項(xiàng)目結(jié)構(gòu)如下composeApp/ src/ commonMain/ kotlin/ App.kt // 共享的根Composable feature/ // 共享的功能模塊 ui/ // 共享的UI組件 data/ // 共享的數(shù)據(jù)層 androidMain/ kotlin/ MainActivity.kt // Android入口 iosMain/ kotlin/ MainViewController.kt // iOS入口 desktopMain/ kotlin/ main.kt // 桌面入口 webMain/ kotlin/ main.kt // Web入口commonMain放可共享的Composable、狀態(tài)管理、業(yè)務(wù)模型、Repository接口和通用工具。androidMain、iosMain、desktopMain、webMain放平臺(tái)入口和平臺(tái)專屬實(shí)現(xiàn)。4.2 依賴方向共享層定義能力平臺(tái)層提供實(shí)現(xiàn)這種結(jié)構(gòu)的關(guān)鍵是依賴方向。共享層定義能力接口平臺(tái)層提供具體實(shí)現(xiàn)。不要讓commonMain直接依賴Android的Context、Activity、Uri或資源訪問方式否則代碼很快會(huì)失去跨平臺(tái)意義。4.3 從一個(gè)共享的App開始共享UI通常從一個(gè)根Composable開始// commonMainComposablefunApp(){MaterialTheme{varcountbyrememberSaveable{mutableStateOf(0)}Column(modifierModifier.fillMaxSize().padding(24.dp),verticalArrangementArrangement.Center,horizontalAlignmentAlignment.CenterHorizontally){Text(計(jì)數(shù)$count)Button(onClick{count}){Text(加一)}}}}然后各平臺(tái)只需要調(diào)用App()// androidMainclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{App()}}}// desktopMainfunmain()application{Window(onCloseRequest::exitApplication){App()}}五、平臺(tái)差異處理expect/actual這是KMPKotlin Multiplatform提供的核心機(jī)制。當(dāng)某個(gè)能力在不同平臺(tái)有不同的實(shí)現(xiàn)時(shí)在commonMain用expect聲明在各平臺(tái)的源集中用actual實(shí)現(xiàn)。// commonMainexpectfungetPlatformName():String// androidMainactualfungetPlatformName():StringAndroid// iosMainactualfungetPlatformName():StringiOS// desktopMainactualfungetPlatformName():StringDesktop在Compose里expect/actual常用于平臺(tái)專屬的UI組件如iOS的日期選擇器平臺(tái)專屬的權(quán)限請(qǐng)求平臺(tái)專屬的文件選擇器平臺(tái)專屬的通知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風(fēng)格的按鈕Button(onClickonClick){Text(text)}}六、第三方庫(kù)生態(tài)6.1 Coil圖片加載Coil是Compose Multiplatform上最推薦的圖片加載庫(kù)。它支持Android和CMP提供AsyncImage和rememberAsyncImagePainter。// commonMainAsyncImage(modelhttps://example.com/image.jpg,contentDescriptionnull,modifierModifier.size(200.dp))注意Accompanist-Coil已經(jīng)廢棄從v0.14開始推薦直接使用Coil的Compose擴(kuò)展庫(kù)io.coil-kt:coil-compose。6.2 AccompanistCompose的“實(shí)驗(yàn)室”Accompanist是Google維護(hù)的Compose擴(kuò)展庫(kù)用于填補(bǔ)Compose工具包中的已知空白實(shí)驗(yàn)新功能。它包含權(quán)限accompanist-permissions把權(quán)限狀態(tài)映射到Compose UI。Pageraccompanist-pager提供ViewPager類似的翻頁(yè)組件。FlowLayout自動(dòng)換行的布局。System UI Controller控制系統(tǒng)狀態(tài)欄和導(dǎo)航欄顏色。Accompanist的部分功能會(huì)逐步融入官方Compose工具包。6.3 其他常用庫(kù)Voyager / DecomposeCMP上的導(dǎo)航庫(kù)因?yàn)镹avigation Compose在CMP上的支持還在完善中。Ktor跨平臺(tái)網(wǎng)絡(luò)請(qǐng)求替代Retrofit。SQLDelight跨平臺(tái)數(shù)據(jù)庫(kù)替代Room。Koin / Kodein跨平臺(tái)依賴注入替代HiltHilt目前不直接支持CMP。七、生產(chǎn)案例Compose Multiplatform已經(jīng)在生產(chǎn)環(huán)境中被廣泛使用。幾個(gè)值得關(guān)注的案例支付寶MYKMP支付寶正式開源了基于KMP和CMP的三端原生跨平臺(tái)方案MYKMP。業(yè)務(wù)邏輯與Compose UI一次編寫即可在Android、iOS、HarmonyOS三端復(fù)用。Instabee將Android應(yīng)用邏輯和UI遷移到KMPCMP通過有效利用Android代碼庫(kù)在短時(shí)間內(nèi)發(fā)布了iOS應(yīng)用。Respawn Pro一個(gè)習(xí)慣追蹤和生產(chǎn)力應(yīng)用其iOS應(yīng)用用CMP構(gòu)建與Android共享96%的代碼。JetBrains官方也指出KMPCMP已經(jīng)成為構(gòu)建現(xiàn)代跨平臺(tái)應(yīng)用的可信賴方案從小型創(chuàng)業(yè)公司到大型企業(yè)都在采用。八、適合什么場(chǎng)景Compose Multiplatform適合這些類型的項(xiàng)目工具類應(yīng)用筆記、待辦、Markdown編輯器、數(shù)據(jù)看板。中后臺(tái)或桌面管理端頁(yè)面結(jié)構(gòu)穩(wěn)定交互主要是表單、列表、篩選、編輯。Android團(tuán)隊(duì)主導(dǎo)的多端嘗試團(tuán)隊(duì)已有Kotlin和Compose經(jīng)驗(yàn)。產(chǎn)品UI在多個(gè)平臺(tái)高度一致不需要大量平臺(tái)原生交互。內(nèi)部工具或新業(yè)務(wù)驗(yàn)證希望快速覆蓋桌面端和移動(dòng)端。它不太適合一開始就強(qiáng)行覆蓋所有場(chǎng)景。如果應(yīng)用高度依賴平臺(tái)原生體驗(yàn)——復(fù)雜視頻編輯、地圖深度交互、系統(tǒng)級(jí)能力、強(qiáng)平臺(tái)風(fēng)格頁(yè)面——跨平臺(tái)共享UI的收益可能會(huì)被適配成本抵消。九、Compose路線圖2026根據(jù)Google官方路線圖Jetpack Compose的未來方向包括核心庫(kù)Material 3滾動(dòng)條Material 3 Expressive組件穩(wěn)定化自適應(yīng)組件FlexBox布局實(shí)驗(yàn)性網(wǎng)格布局實(shí)驗(yàn)性Foundation拖拽支持Lazy布局中AnchoredDraggable穩(wěn)定化網(wǎng)格漸變Mesh gradients圖形矢量緩存改進(jìn)高級(jí)圖形效果陰影改進(jìn)文本多樣式文本編輯可變字體支持智能文本選擇和Linkify自動(dòng)文字大小適配動(dòng)畫共享元素過渡LazyList項(xiàng)動(dòng)畫高級(jí)布局動(dòng)畫編譯器與運(yùn)行時(shí)SlotTable重寫LazyList調(diào)度/線程利用率優(yōu)化強(qiáng)跳過模式多線程調(diào)度器支持一個(gè)值得注意的里程碑從Compose 1.9.0開始滾動(dòng)性能以卡頓為指標(biāo)已經(jīng)與View持平。十、Compose Multiplatform路線圖2026JetBrains的CMP也在快速迭代。從1.7.0到1.12.0幾個(gè)關(guān)鍵版本帶來的變化1.7.02026年5月更多組件進(jìn)入common code類型安全導(dǎo)航iOS性能顯著提升。1.8.22026年2月全面遷移到K2編譯器要求Kotlin 2.1.0。1.9.02026年2月Web端進(jìn)入BetaWasm驅(qū)動(dòng)。1.10.02026年5月互操作視圖自動(dòng)調(diào)整大小統(tǒng)一PreviewNavigation 3Stable Compose Hot Reload。1.11.02026年5月iOS原生文本輸入并發(fā)渲染默認(rèn)開啟Compose UI測(cè)試v2。1.12.02026年8月AI助手工具M(jìn)CP服務(wù)器Web資源管理改進(jìn)桌面窗口狀態(tài)控制。十一、常見陷阱11.1 在commonMain里使用Android專屬API// 錯(cuò)誤commonMain不能依賴Android SDKimportandroid.content.ContextComposablefunBad(){valcontextLocalContext.current// 不存在}用expect/actual把平臺(tái)專屬能力抽象出來。11.2 忘記配置各平臺(tái)的入口CMP項(xiàng)目需要在每個(gè)平臺(tái)的源集中配置入口MainActivity、MainViewController、main()等否則無法運(yùn)行。11.3 依賴版本不兼容CMP版本和Kotlin版本有嚴(yán)格的兼容性要求。1.8.0要求Kotlin 2.1.0。升級(jí)時(shí)要注意同步更新。11.4 誤以為所有Compose庫(kù)都跨平臺(tái)不是所有Android Compose庫(kù)都支持CMP。用之前檢查庫(kù)的文檔確認(rèn)是否支持commonMain。11.5 忽略平臺(tái)差異CMP的目標(biāo)不是“消滅平臺(tái)差異”而是“把差異放在合適的位置”。強(qiáng)行讓所有平臺(tái)看起來一模一樣往往導(dǎo)致體驗(yàn)變差。十二、小結(jié)與下一課預(yù)告這一課我們把Compose的視野從Android擴(kuò)展到了多平臺(tái)。關(guān)鍵點(diǎn)回顧C(jī)ompose Multiplatform是JetBrains基于Jetpack Compose構(gòu)建的跨平臺(tái)UI框架支持Android、iOS、桌面和Web。與Jetpack Compose的關(guān)系共享核心概念但目標(biāo)不同。CMP的Android實(shí)現(xiàn)就是Jetpack Compose。各平臺(tái)現(xiàn)狀A(yù)ndroid完全成熟iOS穩(wěn)定生產(chǎn)就緒桌面穩(wěn)定Web Beta。工程結(jié)構(gòu)commonMain放共享代碼各平臺(tái)源集放入口和平臺(tái)專屬實(shí)現(xiàn)。平臺(tái)差異處理用expect/actual聲明和實(shí)現(xiàn)平臺(tái)專屬能力。第三方庫(kù)Coil圖片、Accompanist實(shí)驗(yàn)性擴(kuò)展、Ktor網(wǎng)絡(luò)、SQLDelight數(shù)據(jù)庫(kù)。生產(chǎn)案例支付寶MYKMP、Instabee、Respawn Pro等。適合場(chǎng)景工具類、中后臺(tái)、UI高度一致的多端項(xiàng)目。路線圖Compose 1.9.0滾動(dòng)性能已追平ViewCMP在快速迭代Web和iOS持續(xù)改進(jìn)。下一課也是這個(gè)系列的最后一課我們會(huì)做一個(gè)綜合項(xiàng)目實(shí)戰(zhàn)。把前十四課學(xué)到的所有知識(shí)——布局、狀態(tài)、導(dǎo)航、主題、動(dòng)畫、列表、架構(gòu)、協(xié)程、測(cè)試——全部串起來從零構(gòu)建一個(gè)完整的、有生產(chǎn)級(jí)質(zhì)量的Compose應(yīng)用。我們會(huì)涵蓋需求分析、架構(gòu)設(shè)計(jì)、模塊拆分、UI實(shí)現(xiàn)、狀態(tài)管理、數(shù)據(jù)層、依賴注入、測(cè)試、性能優(yōu)化。這是對(duì)整個(gè)系列的總結(jié)和升華。課后練習(xí)建議如果你對(duì)跨平臺(tái)感興趣可以試著把你之前寫的一個(gè)Compose頁(yè)面遷移到Compose Multiplatform看看需要在哪些地方做平臺(tái)適配。如果你只關(guān)注Android可以把這一課當(dāng)作“視野擴(kuò)展”了解一下Compose的更大圖景。