Обновите пользовательский интерфейс

Обновите Android-часть

Модуль androidApp содержит приложение для Android и определяет его основную Activity. Код пользовательского интерфейса в основном находится в модуле sharedUI, который приложение Android использует как библиотеку Android. Пользовательский интерфейс реализован с помощью фреймворка Compose Multiplatform.

Внесите изменения и посмотрите, как они отразятся на пользовательском интерфейсе:

1. Перейдите к файлу App.kt в каталоге sharedUI/src/commonMain/.../greetingkmp.

2. Найдите вызов функции Greeting().greet(). Щёлкните правой кнопкой мыши по greet() и выберите Перейти к | Объявлению или использованиям. IDE откроет файл sharedLogic/src/commonMain/.../Greeting.kt.

3. В файле Greeting.kt обновите класс Greeting, чтобы функция greet() возвращала список строк:

   class Greeting {
       private val platform: Platform = getPlatform()
   
       fun greet(): List<String> = buildList {
           add(if (Random.nextBoolean()) "Hi!" else "Hello!")
           add("Guess what this is! > ${platform.name.reversed()}!")
       }
   }
   

4. Импортируйте пакет kotlin.random.Random, следуя предложению IDE.

5. Вернитесь к файлу sharedUI/src/commonMain/.../App.kt и обновите реализацию App(), чтобы отобразить список строк:

   @Composable
   @Preview
   fun App() {
       MaterialTheme {
           val greeting = remember { Greeting().greet() }
   
           Column(
               modifier = Modifier
                   .padding(all = 10.dp)
                   .safeContentPadding()
                   .fillMaxSize(),
               verticalArrangement = Arrangement.spacedBy(8.dp),
           ) {
               greeting.forEach { greeting ->
                   Text(greeting)
                   HorizontalDivider()
               }
           }
       }
   }
   

   Здесь компонуемая функция Column отображает каждый элемент Text, добавляя отступы вокруг них и расстояние между ними.

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

7. Теперь можно запустить приложение Android и посмотреть, как оно отображает список строк:

   

Обновите iOS-часть

Каталог iosApp собирается в приложение для iOS. Он зависит от модуля sharedLogic и использует его как фреймворк iOS. Пользовательский интерфейс приложения написан на Swift.

Внесите те же изменения, что и в приложении Android, чтобы учесть обновление общего кода:

1. В IntelliJ IDEA найдите папку iosApp/iosApp в корне проекта в окне инструмента Проект.

2. Откройте файл iosApp/ContentView.swift, щёлкните правой кнопкой мыши по вызову Greeting().greet() и выберите Перейти к | Объявлению или использованиям. Вы увидите, что IDEA правильно сопоставляет вызов Swift с объявлением Kotlin.

3. Вернитесь к файлу ContentView.swift. Чтобы отобразить список строк так же, как в приложении Android, замените код структуры ContentView следующим:

   struct ContentView: View {
      let phrases = Greeting().greet()
   
      var body: some View {
          List(phrases, id: \.self) {
              Text($0)
          }
      }
   }
   

   • Результаты вызова greet() сохраняются в переменной phrases (let в Swift аналогичен val в Kotlin).

   • Функция List создаёт список элементов Text.

4. Запустите конфигурацию запуска iOS, чтобы увидеть изменения:

   

Возможные проблемы и решения

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

В следующей части руководства вы узнаете о зависимостях и добавите стороннюю библиотеку, чтобы расширить функциональность проекта.

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

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

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

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