Изменение проекта

Добавление новой зависимости

Получить дату можно с помощью платформенных библиотек и ожидаемых и фактических объявлений. Однако мы рекомендуем использовать этот подход только в том случае, если библиотеки Kotlin Multiplatform нет. В этом случае можно воспользоваться библиотекой kotlinx-datetime.

Чтобы использовать библиотеку kotlinx-datetime:

1. Откройте файл gradle/libs.versions.toml и добавьте зависимость kotlinx-datetime в каталог версий:

   [versions]
   kotlinx-datetime = "0.8.0"
   
   [libraries]
   kotlinx-datetime = { module = "org.jetbrains.kotlinx:kotlinx-datetime", version.ref = "kotlinx-datetime" }
   

2. Откройте файл shared/build.gradle.kts и добавьте ссылку на запись этой библиотеки в раздел, где настраивается исходный набор общего кода:

   kotlin {
       // ...
       sourceSets {
           // ...
           commonMain.dependencies {
               // ...
               implementation(libs.kotlinx.datetime)
           }
       }
   }
   
   

3. Для веб-цели поддержка часовых поясов требует библиотеки js-joda. Добавьте ссылку на npm-пакет js-joda в webApp/build.gradle.kts file:

   kotlin {
       // ...
       sourceSets {
           // ...
           commonMain.dependencies {
               // ...
               implementation(npm("@js-joda/timezone", "2.25.1"))
           }
       }
   }
   
   

   Добавление зависимости в исходный набор webMain делает библиотеку доступной как для целей wasmJs, так и js.

4. После добавления зависимости примите предложение IDE синхронизировать конфигурацию Gradle или дважды нажмите Shift и выполните команду Sync Project with Gradle Files.

5. В окне инструментов Terminal выполните следующую команду, чтобы убедиться, что файл yarn.lock обновлен и содержит последние версии зависимостей:

   ./gradlew kotlinUpgradeYarnLock kotlinWasmUpgradeYarnLock
   

6. В файле webApp/src/webMain/kotlin/.../main.kt используйте аннотацию @JsModule, чтобы импортировать npm-пакет js-joda:

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

Улучшение пользовательского интерфейса

1. Откройте файл shared/src/commonMain/kotlin/App.kt и после компонуемой функции App() добавьте следующую функцию, которая возвращает строку с текущей датой:

   fun todaysDate(): String {
       fun LocalDateTime.format() = toString().substringBefore('T')
   
       val now = Clock.System.now()
       val zone = TimeZone.currentSystemDefault()
       return now.toLocalDateTime(zone).format()
   }
   

2. Добавьте импорты, предложенные IDE.

   Убедитесь, что импортируете класс Clock из kotlin.time, а не из kotlinx.datetime.

3. В том же файле измените компонуемую функцию App(), добавив компонуемую функцию Text(), которая вызывает эту функцию и отображает результат:

   @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")
                   }
               }
           }
       }
   }
   

4. Следуйте рекомендациям IDE, чтобы импортировать отсутствующие зависимости.

   

Повторный запуск приложения

Теперь вы можете повторно запустить приложение с помощью тех же конфигураций запуска для Android, iOS, настольных систем и веб-платформы:

Следующий шаг

В следующей части руководства вы познакомитесь с новыми концепциями Compose Multiplatform и создадите собственное приложение с нуля.

Перейти к следующей части

Получить помощь

• Kotlin Slack. Получите приглашение и присоединитесь к каналу #multiplatform.

• Трекер задач Kotlin. Сообщите о новой проблеме.