修改项目

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

添加新依赖项

虽然可以通过平台特定库和预期与实际声明获取日期，但我们建议仅在无可用Kotlin Multiplatform库时采用此方案。本例中可使用kotlinx-datetime库。

添加kotlinx-datetime库的步骤：

打开composeApp/build.gradle.kts文件，将其添加为项目依赖：
kotlin { // ... sourceSets { // ... commonMain.dependencies { // ... implementation("org.jetbrains.kotlinx:kotlinx-datetime:0.6.0") } wasmJsMain.dependencies { implementation(npm("@js-joda/timezone", "2.3.0")) } } }
- 主依赖项添加在配置公共代码源集的章节
- 为简化操作，版本号直接写入而非添加至版本目录
- 为支持web目标时区功能，在wasmJsMain依赖中添加了必要npm包的引用
添加依赖后，系统会提示同步项目。点击立即同步以同步Gradle文件：
在终端中进入项目目录并运行：
./gradlew kotlinUpgradeYarnLock
该Gradle任务确保yarn.lock文件更新至最新依赖版本。

增强用户界面

打开composeApp/src/commonMain/kotlin/App.kt文件，添加返回当前日期字符串的函数：
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()可组合项：
@Composable @Preview fun App() { MaterialTheme { var showContent by remember { mutableStateOf(false) } val greeting = remember { Greeting().greet() } Column(Modifier.fillMaxWidth(), 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") } } } } }
根据IDE提示导入缺失的依赖项：
将web应用的容器从Element切换为指定外部id的HTML元素：
1. 在composeApp/src/wasmJsMain/resources/index.html文件的<body>内添加命名元素：
  <body> <div id="composeApplication" style="width:400px; height: 500px;"></div> </body>
2. 在composeApp/src/wasmJsMain/kotlin/main.kt文件中，将ComposeViewport调用改为指向HTML文件指定ID的String变体：
  @OptIn(ExperimentalComposeUiApi::class) fun main() { ComposeViewport(viewportContainerId = "composeApplication") { App() } }