前言

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

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

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

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

項目創建和結構分析

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

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

然后:File->New->Project

然后設置一下安卓sdk位置,點完成

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

idea,先同步一下gradle:

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

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

android目錄內其實就是一個安卓項目

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

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

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

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

common目錄相對于android目錄,相當于是安卓項目的一個library

common目錄相對于desktop目錄,相當于是jvm項目的一個library

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

多平臺的三方庫

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

?KMM多平臺能力

我們看一下App.kt中的getPlatformName()函數,可以發現他是這樣聲明的:

?這個相當于在共享模塊聲明它的簽名,然后我們可以在每個平臺中進行實現

androidMain目錄中該函數的實現(desktopMain中實現也是這樣):

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

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

正文

compose寫ui

我們要實現的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 : 簡單的根據數量放置list的條目* warning:*/ @Composable fun NumberList() {//設置數量的狀態對象(State)var number by remember { mutableStateOf(5) }//相當于豎向的線性布局Column {//相當于橫向的線性布局Row {//設置一個按鈕Button({//按鈕的點擊事件,點擊后改變狀態對象內的值,會引發使用該對象的compose組件重組number++}) {//設置按鈕內的組件uiText("數量+1")}//設置一個寬度為8dp的占位,相當于將他們兩個隔開了一點(就像margin)Spacer(Modifier.width(8.dp))Button({number--}) {Text("數量-1")}Spacer(Modifier.width(8.dp))Text("總數量:$number")}Spacer(Modifier.height(8.dp))//相當于豎向的RecyclerViewLazyColumn {//相當于RecyclerView.Adapter,只不過更簡單items(number) {//設置item的uiItem(it)}}} }@Composable fun Item(index: Int) {//我們的item的ui中只有一個文字,并且設置了一下paddingText("索引為:$index", modifier = Modifier.padding(5.dp)) }

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

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

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

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

使用KMM多平臺方法

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

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

然后我們稍微改一下ui:

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

ps:調用多平臺函數可能沒有代碼提示emmm

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

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

源碼:?ltttttttttttt/KMM_and_Compose_Sample

end

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。