修改项目

本教程使用 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.7.1")
        }
        webMain.dependencies {
            implementation(npm("@js-joda/timezone", "2.22.0"))
        }
    }
}

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

依赖项添加完成后，系统会提示你重新同步项目。点击“同步 Gradle 变更”按钮以同步 Gradle 文件：
在“终端”工具窗口中，运行以下命令：
shell
```
./gradlew kotlinUpgradeYarnLock kotlinWasmUpgradeYarnLock
```
此 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 = "Today's date is ${todaysDate()}",
                modifier = Modifier.padding(20.dp),
                fontSize = 24.sp,
                textAlign = TextAlign.Center
            )
            Button(onClick = { showContent = !showContent }) {
                Text("Click me!")
            }
            AnimatedVisibility(showContent) {
                Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
                    Image(painterResource(Res.drawable.compose_multiplatform), null)
                    Text("Compose: $greeting")
                }
            }
        }
    }
}