KMP + Compose 跨平台 Android IOS 实战入门

KMP(Kotlin Multiplatform)是一种面向移动端开发的跨平台框架,使用 Kotlin 语言编写,可实现在 Android 和 iOS 平台上共享代码和逻辑。通过 KMP 框架,我们可以编写一次代码,然后在不同的平台上进行部署和运行,大大提高了开发效率和代码重用性。KMP 框架允许我们使用相同的代码基础来构建和维护应用程序,减少了开发过程中的重复劳动,同时也能够更方便地进行代码调试和测试。

由于 KMP 的跨平台只停留在逻辑上,那么从 UI 上就需要使用到 Compose 的跨平台了

在使用 KMP + Compose 进行开发时,需要几个硬性条件:

1️⃣ Mac电脑(苹果开发必须mac)

2️⃣ Android Studio

3️⃣ Xcode

4️⃣ 配置 ios 开发环境(cocoapods、开发者账号等)


一切准备好之后,在 Android Studio 上安装 Kotlin Multiplatform Mobile 插件:

创建一个 KMM 项目:

Android 端配置默认即可,IOS 这边的 framework distribution 确保是 cocoapods


创建完一个项目后,会有这些目录:

和通常的 Android 工程相比,多了两个模块:iosApp 和 shared

顾名思义就是 IOS 的代码会在 iosApp 模块中,shared 模块则存放的是 Android 和 IOS 的通用代码,包括逻辑代码和UI代码


想要在 shared 模块下写 Compose,还需要额外的依赖:

settings.gradle.kts:

Kotlin 复制代码
pluginManagement {
    repositories {
        // ....
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    }
    plugins {
        id("org.jetbrains.compose").version("1.6.1")
    }
}

share 模块的 build.gradle.kts:

Kotlin 复制代码
plugins {
    // ....
    id("org.jetbrains.compose")
}

kotlin {
    // ....

    sourceSets {
        commonMain.dependencies { // 公共模块 UI或业务 依赖
            implementation(compose.ui)
            implementation(compose.foundation)
            implementation(compose.material)
            implementation(compose.runtime)
        }
    }

}

配置好后,Sync 一下就可以在 share 模块中编写 Compose 代码和运行了


IOS 这边默认是没有用到 Compose 的,所以需要替换一下配置信息让 IOS 调用到 share 模块的 Compose 函数

iosApp -> iosApp -> IOSApp.swift:

Swift 复制代码
import SwiftUI
import shared

@main
struct iOSApp: App {
	var body: some Scene {
		WindowGroup {
			ContentView()
		}
	}
}

ContentView.swift:

Swift 复制代码
import SwiftUI
import shared

struct ContentView: View {
    var body: some View {
        ComposeView().ignoresSafeArea()
    }
}

struct ComposeView: UIViewControllerRepresentable {

    func makeUIViewController(context: Context) -> UIViewController {
        Main_iosKt.iOSView() // 调用公共模块的函数
    }

    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
}

IOS 调用 Main_iosKt.iOSView() 对应的就是 share 模块 main.ios.kt 文件中的 iOSView 函数

share -> iosMain -> kotlin -> 包名 -> main.ios.kt

Kotlin 复制代码
import androidx.compose.ui.window.ComposeUIViewController
import platform.UIKit.UIViewController

fun iOSView(): UIViewController = ComposeUIViewController {
    CommonView()
}

CommonView:

share -> commonMain -> kotlin -> 包名 -> CommonView.kt

Kotlin 复制代码
@Composable
internal fun CommonView() {
    Box(Modifier.fillMaxSize()) {
        Box(Modifier.size(100.dp).background(Color.Cyan).align(Alignment.TopStart))
        Box(Modifier.size(100.dp).background(Color.Green).align(Alignment.Center))
        Box(Modifier.size(100.dp).background(Color.Blue).align(Alignment.BottomEnd))
    }
}

然后在 Edit Configurations 配置一下 IOS 的运行设备配置

运行:


Android 这边为了规范,也新建一个:

share -> androidMain -> kotlin -> 包名 -> main.android.kt

Kotlin 复制代码
@Composable
fun AndroidView() {
    CommonView()
}

在 Android 端进行调用:

Kotlin 复制代码
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AndroidView()
        }
    }
}

运行:


KMP + Compose 这一套确实能够实现逻辑和 UI 上的跨平台,但是如果是涉及到 IOS 特定的属性,就需要通过与 IOS 原生的交互来实现

相关推荐
晨曦_子画33 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
大福是小强34 分钟前
005-Kotlin界面开发之程序猿初试Composable
kotlin·界面开发·桌面应用·compose·jetpack·可组合
孤客网络科技工作室1 小时前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
Mr Lee_2 小时前
android 配置鼠标右键快捷对apk进行反编译
android
顾北川_野3 小时前
Android CALL关于电话音频和紧急电话设置和获取
android·音视频
&岁月不待人&3 小时前
Kotlin by lazy和lateinit的使用及区别
android·开发语言·kotlin
Winston Wood5 小时前
Android Parcelable和Serializable的区别与联系
android·序列化
清风徐来辽5 小时前
Android 项目模型配置管理
android
帅得不敢出门5 小时前
Gradle命令编译Android Studio工程项目并签名
android·ide·android studio·gradlew
小白学大数据6 小时前
正则表达式在Kotlin中的应用:提取图片链接
开发语言·python·selenium·正则表达式·kotlin