创建你的 Compose Multiplatform 应用

在这里，你将学习如何使用Kotlin Multiplatform网页向导和Android Studio创建并运行第一个Compose Multiplatform应用。

通过Compose Multiplatform UI框架，你可以将Kotlin Multiplatform的代码共享能力扩展到应用逻辑之外。只需实现一次用户界面，即可在Compose Multiplatform支持的所有平台上使用。

本教程将构建一个可在Android、iOS、桌面和Web上运行的示例应用。你将使用Compose Multiplatform框架创建用户界面，并学习其基础知识：可组合函数、主题、布局、事件和修饰符。

教程注意事项：

无需具备Compose Multiplatform、Android或iOS的开发经验。建议在开始前先熟悉Kotlin基础知识。
完成本教程只需Android Studio。它允许你在Android和桌面上尝试跨平台开发。如需iOS支持，需要配备已安装Xcode的macOS设备（这是iOS开发的通用限制）。
你可以根据兴趣选择特定平台，忽略其他平台。

环境配置

请先阅读Kotlin Multiplatform开发环境配置文章，确保已：

安装Android Studio的Kotlin Multiplatform插件
若需构建iOS应用，至少启动过一次Xcode并接受使用条款
运行Kdoctor检查环境配置问题

以下说明假设你已为目标平台安装所需软件。

使用向导创建项目

打开Kotlin Multiplatform向导
在New project标签页，将项目名称改为"ComposeDemo"，项目ID改为"compose.project.demo"
勾选Android、 Desktop和Web选项
若使用Mac，同时勾选iOS ，确保Share UI选项已选中
点击Download按钮并解压生成的压缩包

查看项目结构

启动Android Studio
在欢迎界面点击Open ，或通过菜单选择File | Open
导航至解压的"ComposeDemo"文件夹并点击Open
Android Studio会自动识别包含Gradle构建文件的文件夹并作为新项目打开。若未在向导中选择iOS，则不会出现以"ios"或"apple"开头的文件夹。
Android Studio可能自动建议升级项目中的Android Gradle插件至最新版本。不建议升级，因Kotlin Multiplatform与最新AGP版本存在兼容性问题（参见兼容性表）。
将视图从Android切换至Project以查看完整项目结构：

项目包含两个模块：

composeApp ：包含Android、桌面、iOS和Web应用共享逻辑的Kotlin模块，使用Gradle构建系统
iosApp ：构建iOS应用的Xcode项目，依赖共享模块作为iOS框架

composeApp模块包含以下源集： androidMain、 commonMain、 desktopMain、 iosMain和wasmJsMain 。源集是Gradle对逻辑分组文件的概念，每个组有其独立依赖项。在Kotlin Multiplatform中，不同源集可针对不同平台。

commonMain源集使用通用Kotlin代码，平台源集使用各目标平台特定的Kotlin代码。 androidMain和desktopMain使用Kotlin/JVM， iosMain使用Kotlin/Native， wasmJsMain使用Kotlin/Wasm。

共享模块构建为Android库时，通用Kotlin代码被视为Kotlin/JVM；构建为iOS框架时被视为Kotlin/Native；构建为Web应用时被视为Kotlin/Wasm。

建议尽可能将实现编写为通用代码，而非在平台特定源集中重复功能。

在composeApp/src/commonMain/kotlin目录中打开App.kt文件，包含实现极简但完整的Compose Multiplatform UI的App()函数：

@Composable @Preview fun App() { MaterialTheme { var showContent by remember { mutableStateOf(false) } Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Button(onClick = { showContent = !showContent }) { Text("Click me!") } AnimatedVisibility(showContent) { val greeting = remember { Greeting().greet() } Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) { Image(painterResource(Res.drawable.compose_multiplatform), null) Text("Compose: $greeting") } } } } }

现在在所有支持平台上运行应用。