修改项目

本教程使用 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 文件并将依赖项添加到项目中：

将主要的 kotlinx-datetime 依赖项添加到配置公共代码源集的路径中。为了简单起见，你可以直接包含版本号，而不是将其添加到版本编目中。
对于 Web 目标，时区支持需要 js-joda 库。在 webMain 依赖项中添加对 js-joda npm 软件包的引用。

kotlin

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

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

在 webMain 源集中，使用 @JsModule 注解导入 js-joda npm 软件包：

kotlin

import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.window.ComposeViewport
import kotlin.js.ExperimentalWasmJsInterop
import kotlin.js.JsModule

@OptIn(ExperimentalWasmJsInterop::class)
@JsModule("@js-joda/timezone")
external object JsJodaTimeZoneModule

private val jsJodaTz = JsJodaTimeZoneModule

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport {
        App()
    }
}

改进用户界面

打开 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()
}

添加 IDE 建议的导入。确保从 kotlin.time 导入 Clock 类，而不是 kotlinx.datetime。

在同一文件中，修改 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")
                }
            }
        }
    }
}