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

相关推荐
Dnelic-8 分钟前
【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录
android·junit·单元测试·android studio·自学笔记
Eastsea.Chen2 小时前
MTK Android12 user版本MtkLogger
android·framework
比格丽巴格丽抱9 小时前
flutter项目苹果编译运行打包上线
flutter·ios
长亭外的少年10 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
JIAY_WX10 小时前
kotlin
开发语言·kotlin
网络安全-老纪11 小时前
iOS应用网络安全之HTTPS
web安全·ios·https
建群新人小猿12 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神13 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
兰琛13 小时前
20241121 android中树结构列表(使用recyclerView实现)
android·gitee
Y多了个想法14 小时前
RK3568 android11 适配敦泰触摸屏 FocalTech-ft5526
android·rk3568·触摸屏·tp·敦泰·focaltech·ft5526