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

相关推荐
tangweiguo0305198726 分钟前
Android 混合开发实战:统一 View 与 Compose 的浅色/深色主题方案
android
老狼孩1112235 分钟前
2025新版懒人精灵零基础及各板块核心系统视频教程-全分辨率免ROOT自动化开发
android·机器人·自动化·lua·脚本开发·懒人精灵·免root开发
打死不学Java代码1 小时前
PaginationInnerInterceptor使用(Mybatis-plus分页)
android·java·mybatis
IT乐手3 小时前
android 解决系统级应用 WebView 加载崩溃的问题
android
Kapaseker3 小时前
Kotlin泛型精解:类型世界的奇幻之旅
android·kotlin
余生大大3 小时前
关于Safari浏览器在ios<16.3版本不支持正则表达式零宽断言的解决办法
ios·正则表达式·safari
顾林海3 小时前
深入探究 Android Native 代码的崩溃捕获机制
android·面试·性能优化
爱分享的程序员4 小时前
前端跨端框架的开发以及IOS和安卓的开发流程和打包上架的详细流程
android·前端·ios
thigh_d4 小时前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
Macle_Chen4 小时前
ios开发中xxx.debug.dylib not found
ios·bug·debug.dylib