探索可组合代码

让我们仔细研究Kotlin Multiplatform向导创建的示例可组合项。首先是实现通用UI并可在所有平台使用的可组合函数App() ，其次是各平台上启动该UI的平台特定代码。

实现可组合函数

在composeApp/src/commonMain/kotlin/App.kt文件中查看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")
                }
            }
        }
    }
}

App()函数是用@Composable注解的常规Kotlin函数，这类函数被称为_可组合函数_或简称_组合项_。它们是构建基于Compose Multiplatform的UI的基础模块。

可组合函数具有以下通用结构：

MaterialTheme设置应用外观。默认配置可自定义，例如选择颜色、形状和排版。
Column组合项控制应用布局。此处它在AnimatedVisibility组合项上方显示Button。
Button包含渲染文本的Text组合项。
AnimatedVisibility通过动画显示或隐藏Image。
painterResource加载存储在XML资源中的矢量图标。

Column的horizontalAlignment参数使其内容居中。但要使此设置生效，列需占据容器全部宽度，这通过modifier参数实现。

修饰符是Compose Multiplatform的关键组件，是调整UI中组合项外观或行为的主要机制。修饰符通过Modifier类型的方法创建，链式调用时每个方法都可能改变前一个调用返回的Modifier ，因此顺序很重要。详见JetPack Compose文档。

状态管理

示例组合项的最后一个方面是状态管理。 App组合项中的showContent属性使用mutableStateOf()函数构建，意味着它是可观察的状态对象：

var showContent by remember { mutableStateOf(false) }

状态对象被包裹在remember()函数调用中，表示它被构建一次后由框架保留。执行此操作会创建一个属性，其值是包含布尔值的状态对象。框架缓存该状态对象，允许组合项观察它。

当状态值变化时，所有观察它的组合项会被重新调用，使得它们生成的任何部件都能重绘。这称为_重组_。

在应用中，唯一改变状态的地方是按钮的点击事件。 onClick事件处理器翻转showContent属性值，导致图像显示或隐藏，因为父级AnimatedVisibility组合项观察着showContent。

在不同平台启动UI

App()函数的执行方式因平台而异：Android上由活动管理，iOS上由视图控制器管理，桌面端由窗口管理，网页端由容器管理。让我们逐一查看。

Android平台

对于Android，打开composeApp/src/androidMain/kotlin中的MainActivity.kt文件：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            App()
        }
    }
}

这是调用App组合项的Android活动MainActivity。

iOS平台

对于iOS，打开composeApp/src/iosMain/kotlin中的MainViewController.kt文件：

fun MainViewController() = ComposeUIViewController { App() }

这是执行与Android活动相同角色的视图控制器。注意iOS和Android类型都只是调用App组合项。

桌面平台

对于桌面端，查看composeApp/src/desktopMain/kotlin中的main()函数：

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "ComposeDemo") {
        App()
    }
}

application()函数启动新的桌面应用。
该函数接收一个lambda，用于初始化UI。通常创建Window并指定属性和窗口关闭时的程序反应指令。本例中整个应用会退出。
窗口内可放置内容。与Android和iOS一样，唯一内容是App()函数。

当前App函数未声明任何参数。在大型应用中，通常会向平台特定依赖项传递参数，这些依赖项可以手动创建或使用依赖注入库。

网页平台

在composeApp/src/wasmJsMain/kotlin/main.kt文件中查看main()函数：

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) { App() }
}

@OptIn(ExperimentalComposeUiApi::class)注解告知编译器你正在使用标记为实验性、未来可能变更的API。
ComposeViewport()函数为应用设置Compose环境。
网页应用插入到作为ComposeViewport函数参数指定的容器中。示例中使用整个文档主体作为容器。
App()函数负责使用Jetpack Compose构建应用的UI组件。

下一步

在教程下一部分，你将向项目添加依赖项并修改用户界面。

进入下一部分

获取帮助

Kotlin Slack 。获取邀请并加入#multiplatform频道。
Kotlin问题追踪器。提交新问题。

22 四月 2025