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