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 原生的交互来实现