前言

現(xiàn)在跨平臺開發(fā)框架有很多,比如H5類型,RN,Flutter等,而Kotlin多平臺+Compose跨平臺ui可能也是未來一種好用的開發(fā)框架

ps:后文KMM都是指Kotlin多平臺框架,而不是單指Kotlin Multiplatform Mobile

雖然目前KMM還有些不太成熟,Compose跨平臺的支持平臺不太全,但也不妨礙現(xiàn)在來嘗嘗鮮.

ps:Compose-android正式,Compose-desktop正式,Compose-web未正式,Compose-ios期待中...

項目創(chuàng)建和結(jié)構(gòu)分析

首先我們使用idea來創(chuàng)建一個KMM+Compose的原始框架項目

我們先將idea更新到最新(如果不想下載idea可以在文末下載示例的源碼)

然后:File->New->Project

然后設(shè)置一下安卓sdk位置,點完成

?創(chuàng)建好項目可以選擇使用Android Studio或idea編寫代碼

idea,先同步一下gradle:

?as,一般會自動同步gradle,手動如下:

我們可以看到有三個主要的開發(fā)目錄:

android目錄內(nèi)其實就是一個安卓項目

desktop目錄是一個jvm程序目錄,運行其中的main函數(shù),會出現(xiàn)一個GUI(也就是compose-desktop的程序),其中的程序目前是運行在一個精簡版的jvm虛擬機(jī)中(打出來的包就帶有精簡版的jvm虛擬機(jī),所以不依賴jvm環(huán)境),據(jù)說會有直接轉(zhuǎn)成native的能力(目前不清楚有沒有)

common目錄是kmm的核心目錄,可以看到其中有androidMain,commonMain,desktopMain等目錄

commonMain是共享代碼目錄,只能調(diào)用kotlin基礎(chǔ)庫和多平臺的三方庫能力(比如compose,ktor等)

由于commonMain并不隸屬于特定平臺,所以只能交由 androidMain 和 desktopMain 來實現(xiàn)特定的平臺能力(后面會看到示例)

common目錄相對于android目錄,相當(dāng)于是安卓項目的一個library

common目錄相對于desktop目錄,相當(dāng)于是jvm項目的一個library

ps:由于目前兩個平臺都是基于jvm的,所以commonMain目錄也可以使用jvm基礎(chǔ)庫(File等)

多平臺的三方庫

?基于多平臺的comopse框架,我們可以直接在commonMain中寫compose代碼,在android和desktop中都可以調(diào)用:

?KMM多平臺能力

我們看一下App.kt中的getPlatformName()函數(shù),可以發(fā)現(xiàn)他是這樣聲明的:

?這個相當(dāng)于在共享模塊聲明它的簽名,然后我們可以在每個平臺中進(jìn)行實現(xiàn)

androidMain目錄中該函數(shù)的實現(xiàn)(desktopMain中實現(xiàn)也是這樣):

這樣我們就擁有了多平臺開發(fā)能力,只要將平臺間不兼容的地方聲明一個待實現(xiàn)的多平臺函數(shù),然后在每個平臺實現(xiàn),就可以在commonMain中輕松使用了

?接下來我們就去寫一個簡單的程序

正文

compose寫ui

我們要實現(xiàn)的ui如下,非常簡單:

?

代碼如下:

package com.lt.kmm_and_compose_sample.commonimport androidx.compose.foundation.layout.* import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material.Button import androidx.compose.material.Text import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp/*** creator: lt 2022/3/15 lt.dygzs@qq.com* effect : 簡單的根據(jù)數(shù)量放置list的條目* warning:*/ @Composable fun NumberList() {//設(shè)置數(shù)量的狀態(tài)對象(State)var number by remember { mutableStateOf(5) }//相當(dāng)于豎向的線性布局Column {//相當(dāng)于橫向的線性布局Row {//設(shè)置一個按鈕Button({//按鈕的點擊事件,點擊后改變狀態(tài)對象內(nèi)的值,會引發(fā)使用該對象的compose組件重組number++}) {//設(shè)置按鈕內(nèi)的組件uiText("數(shù)量+1")}//設(shè)置一個寬度為8dp的占位,相當(dāng)于將他們兩個隔開了一點(就像margin)Spacer(Modifier.width(8.dp))Button({number--}) {Text("數(shù)量-1")}Spacer(Modifier.width(8.dp))Text("總數(shù)量:$number")}Spacer(Modifier.height(8.dp))//相當(dāng)于豎向的RecyclerViewLazyColumn {//相當(dāng)于RecyclerView.Adapter,只不過更簡單items(number) {//設(shè)置item的uiItem(it)}}} }@Composable fun Item(index: Int) {//我們的item的ui中只有一個文字,并且設(shè)置了一下paddingText("索引為:$index", modifier = Modifier.padding(5.dp)) }

我們把a(bǔ)ndroid文件夾中的MainActivity給App()代碼注掉,然后使用我們剛寫的compose代碼

?運行安卓項目后,點擊數(shù)量+1,總數(shù)量文字會變,而且條目也會多一個

然后我們再修改一下desktop文件夾中的Main.kt

然后運行這個main函數(shù)看一下compose-desktop的效果(LazyColumn的滾動是滾動鼠標(biāo)滾輪)

使用KMM多平臺方法

首先我們在commonMain的platform.kt文件中定義一下expect fun:

然后我們在androidMain和desktopMain中實現(xiàn)一下這個函數(shù),為了簡單就直接寫死一個數(shù)了,?

然后我們稍微改一下ui:

在 Text("總數(shù)量:$number") 下面增加如下代碼:

ps:調(diào)用多平臺函數(shù)可能沒有代碼提示emmm

Button({number = getNumber()}) {Text("從本地加載數(shù)量")}

?然后一個簡單的多平臺應(yīng)用就搞好了,后面有時間再寫更復(fù)雜的功能

源碼:?ltttttttttttt/KMM_and_Compose_Sample

end

總結(jié)

以上是生活随笔為你收集整理的KMM+Compose 开发一个Kotlin多平台应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。