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:
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:
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:
import SwiftUI
import shared@main
struct iOSApp: App {var body: some Scene {WindowGroup {ContentView()}}
}
ContentView.swift:
import SwiftUI
import sharedstruct 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
import androidx.compose.ui.window.ComposeUIViewController
import platform.UIKit.UIViewControllerfun iOSView(): UIViewController = ComposeUIViewController {CommonView()
}
CommonView:
share -> commonMain -> kotlin -> 包名 -> CommonView.kt
@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
@Composable
fun AndroidView() {CommonView()
}
在 Android 端进行调用:
class MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {AndroidView()}}
}
运行:
KMP + Compose 这一套确实能够实现逻辑和 UI 上的跨平台,但是如果是涉及到 IOS 特定的属性,就需要通过与 IOS 原生的交互来实现