修改项目

本教程使用 IntelliJ IDEA，但你也可以在 Android Studio 中进行操作 — 这两个 IDE 共享相同的核心功能性以及 Kotlin Multiplatform 支持。

这是使用共享逻辑和 UI 创建 Compose Multiplatform 应用教程的第三部分。在继续之前，请确保你已完成了之前的步骤。

修改项目

创建你自己的应用程序

让我们修改由 Kotlin Multiplatform 向导生成的代码，并在 App 可组合项中显示当前日期。为此，你将向项目添加一个新的依赖项，增强 UI，并在每个平台重新运行应用程序。

添加一个新依赖项

你可以使用平台特有的库以及预期与实际声明来获取日期。但我们建议你仅在没有可用的 Kotlin Multiplatform 库时才使用此方法。在这种情况下，你可以依赖于 kotlinx-datetime 库。

你可以在 klibs.io 上探索适用于你的目标平台的 Kotlin Multiplatform 库，这是 JetBrains 提供的一项实验性的搜索服务，用于发现多平台库。

要使用 kotlinx-datetime 库：

打开 composeApp/build.gradle.kts 文件，并将其添加为项目的依赖项。

kotlin

kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.2")
        }
        wasmJsMain.dependencies {
            implementation(npm("@js-joda/timezone", "2.22.0"))
        }
    }
}

主要依赖项已添加到配置公共代码源代码集的部分。
为简单起见，版本号直接包含在内，而不是添加到版本目录。
为了支持 Web 目标平台中的时区，所需的 npm 包引用已包含在 wasmJsMain 依赖项中。

依赖项添加完成后，系统会提示你重新同步项目。点击“同步 Gradle 变更”按钮以同步 Gradle 文件：
在“终端”工具窗口中，运行以下命令：
shell
```
./gradlew kotlinUpgradeYarnLock
```
此 Gradle 任务可确保 yarn.lock 文件已更新为最新依赖项版本。

增强用户界面

打开 composeApp/src/commonMain/kotlin/App.kt 文件，并添加以下函数，该函数返回一个包含当前日期的字符串：

kotlin

fun todaysDate(): String {
    fun LocalDateTime.format() = toString().substringBefore('T')

    val now = Clock.System.now()
    val zone = TimeZone.currentSystemDefault()
    return now.toLocalDateTime(zone).format()
}

在同一文件中，修改 App() 可组合项，以包含调用此函数并显示结果的 Text() 可组合项：

kotlin

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        val greeting = remember { Greeting().greet() }
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "今天的日期是 ${todaysDate()}",
                modifier = Modifier.padding(20.dp),
                fontSize = 24.sp,
                textAlign = TextAlign.Center
            )
            Button(onClick = { showContent = !showContent }) {
                Text("点击我！")
            }
            AnimatedVisibility(showContent) {
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}

按照 IDE 的建议导入缺失的依赖项。请确保从 kotlinx.datetime 包导入 todaysDate() 函数的所有缺失依赖项，不是 kotlin.time。
将 Web 应用从使用 Element 作为容器切换到使用具有外部指定 id 的 HTML 元素：
1. 在 composeApp/src/wasmJsMain/resources/index.html 文件中，在 <body> 中添加一个命名元素：
  html
```
<body>
<div id="composeApplication" style="width:400px; height: 600px;"></div>
</body>
```
2. 在 composeApp/src/wasmJsMain/kotlin/main.kt 文件中，将 ComposeViewport 调用更改为 String 变体，指向你在 HTML 文件中指定的 ID：
  kotlin
```
@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(viewportContainerId = "composeApplication") {
        App()
    }
}
```