更新用户界面

构建用户界面时，你将在项目的Android部分使用Compose Multiplatform工具包，而在iOS部分使用SwiftUI 。两者都是声明式UI框架，你会在UI实现中看到相似之处。在这两种情况下，数据都存储在phrases变量中，随后通过遍历来生成一系列Text项。

更新Android部分

composeApp模块包含一个Android应用，定义了其主活动和UI视图，并将shared模块作为常规Android库使用。应用的UI使用了Compose Multiplatform框架。

进行一些更改并观察它们如何反映在UI中：

导航到composeApp/src/androidMain/kotlin中的App.kt文件。
找到Greeting类的调用。选中greet()函数，右键点击并选择转到 | 声明或用法菜单项。你会看到这是你在上一步中编辑的shared模块中的同一个类。
在Greeting.kt中，更新greet()函数：
fun greet(): List<String> = buildList { add(if (Random.nextBoolean()) "Hi!" else "Hello!") add("Guess what this is! > ${platform.name.reversed()}!") }
现在它返回一个字符串列表。
返回App.kt文件并更新App()的实现：
@Composable @Preview fun App() { MaterialTheme { val greeting = remember { Greeting().greet() } Column( modifier = Modifier.padding(all = 20.dp), verticalArrangement = Arrangement.spacedBy(8.dp), ) { greeting.forEach { greeting -> Text(greeting) Divider() } } } }
这里的Column可组合项展示了每个Text项，并在它们周围添加了内边距和间距。
按照Android Studio的建议导入缺失的依赖项。
现在你可以运行Android应用，看看它如何显示字符串列表：

iosApp是一个Xcode项目，构建为iOS应用。它依赖并使用shared模块作为iOS框架。应用的UI是用Swift编写的。

实现与Android应用中相同的更改：

在项目工具窗口中找到项目根目录下的iosApp文件夹。
在iosApp中，右键点击iosApp.xcodeproj文件夹并选择打开方式 | Xcode。
打开ContentView.swift文件，选中greet()函数并使用⌃ ⌘ J快捷键，或右键点击函数名并选择跳转到定义。
你会看到shared模块中定义的Kotlin函数的Objective-C声明。Kotlin类型在从Objective-C/Swift使用时表示为Objective-C类型。这里的greet()函数在Kotlin中返回List<String> ，在Swift中视为返回NSArray<NSString> 。有关类型映射的更多信息，请参阅与Swift/Objective-C的互操作性。
更新SwiftUI代码，以与Android应用相同的方式显示列表项：
struct ContentView: View { let phrases = Greeting().greet() var body: some View { List(phrases, id: \.self) { Text($0) } } }
- greet()调用的结果存储在phrases变量中（Swift中的let类似于Kotlin的val）。
- List函数生成一系列Text项。
- 如果你尚未重新构建iOS框架，Xcode会在此ContentView实现中报告错误。这是预期的——继续下一步。
在Android Studio中，启动iOS运行配置以查看更改：

你的Xcode项目可能仍在使用旧版本的框架。要解决此问题，请返回Android Studio并重新构建项目或启动iOS运行配置。

Xcode可能需要清除缓存的二进制文件：尝试通过在主菜单中选择产品 | 清理构建文件夹来重置环境。

在教程的下一部分，你将了解依赖项，并添加第三方库以扩展项目的功能。

22 四月 2025