Compose跨平台开发教程

"用Compose一套代码开发安卓、iOS、电脑、网页应用！"

前置基础

• 1. 有kotlin compose开发基础

• 1. 会正常使用电脑idea软件 如果都不会, 建议补充相关知识再观看

1. 下载工具

• IntelliJ IDEA下载2025.2.1: https://www.jetbrains.com/

• 安装相关插件- compose multiplatform for desktop IDE support

• 项目构建网站: https://kmp.jetbrains.com/zh-cn/

2. 项目结构

1. 根目录核心文件

• build.gradle.kts：全局依赖与插件配置

• settings.gradle.kts：模块定义（如 composeApp、iosApp）

2. 跨平台核心模块 composeApp

共享代码与多平台逻辑，按 "通用+平台特定" 拆分：

• src/commonMain：全平台共享代码（业务逻辑、数据模型、通用 Compose UI）

• src/[平台]Main：各平台适配代码（如 androidMain/iosMain/jvmMain/wasmJsMain，实现平台特有 API）

• build.gradle.kts：声明多平台插件、依赖（Compose/Ktor 等）及编译目标

3. 平台入口模块

• iosApp：iOS 应用入口（Swift/UIKit），通过 Kotlin 生成的 Framework 调用共享代码

• Android 入口：直接集成于 composeApp/androidMain（MainActivity 启动 Compose UI）

3. 修改src/commonMain代码

@Composable
fun App() {
  Text("你好, 这是一个跨平台App！")
  Button({ println("点击了一下") }) {
    Text("按钮")
  }
}

4. 运行调试

• 安卓：选androidApp运行

• 电脑：选composedesk run 运行

• 网页：选kotlin/wasmJsBrowserDevelopmentRun 运行

5. 打包发布

• 安卓：生成APK

• 电脑：打包exe

• 网页：输出静态文件

"搞定！一套代码全平台运行，快来试试吧！"