Предварительный просмотр интерфейса Compose

Настройка предварительного просмотра

Если вы начинаете с нуля, можно создать новый проект с помощью мастера IDE, в котором уже настроены необходимые параметры

Для начала установите плагин Kotlin Multiplatform для IDE, доступный как для IntelliJ IDEA, так и для Android Studio. Новый проект будет содержать готовую к использованию функцию App с аннотацией @Preview:

Чтобы включить поддержку предварительного просмотра в существующем проекте, добавьте необходимые зависимости в файл build.gradle.kts модуля KMP:

1. Зависимость от аннотации для исходного набора commonMain: старую или новую, в зависимости от версии Compose Multiplatform.

2. Зависимость от инструментов в classpath, объявление которой зависит от конфигурации Android.

Зависимость от аннотации должна указывать на одну из реализаций @Preview, например:

kotlin {
    sourceSets {
        commonMain.dependencies {
            // The new annotation, available in CMP 1.10.0 and later
            implementation("org.jetbrains.compose.ui:ui-tooling-preview:1.10.0")
            // To import the new annotation:
            // import androidx.compose.ui.tooling.preview.Preview

            // The old annotation, deprecated in CMP 1.10.0
            implementation("org.jetbrains.compose.components:components-ui-tooling-preview:1.10.0")
            // To import the old annotation:
            // import org.jetbrains.compose.ui.tooling.preview.Preview
        }
    }
}

Зависимость от инструментов следует объявить в корневом блоке dependencies {} файла build.gradle.kts модуля общего кода одним из двух способов — в зависимости от конфигурации целевой платформы Android:

• Если вы используете плагин com.android.application или com.android.library:

  dependencies {
      debugImplementation("org.jetbrains.compose.ui:ui-tooling:1.10.0")
  }
  

• Если вы используете плагин com.android.kotlin.multiplatform.library:

  dependencies {
      androidRuntimeClasspath("org.jetbrains.compose.ui:ui-tooling:1.10.0")
  }
  

Использование предварительного просмотра

Compose Multiplatform позволяет использовать все возможности предварительного просмотра, предоставляемые инструментами Android. Можно сделать предварительный просмотр интерактивным, скопировать его как изображение или отобразить несколько вариантов одной и той же компонуемой функции @Preview с разными параметрами. Подробнее о доступных функциях см. в руководстве Android по предварительному просмотру.

Настраивая дополнительные параметры, можно управлять тем, как функция @Composable отображается при предварительном просмотре во время разработки. Compose Multiplatform поддерживает следующие параметры аннотации @Preview:

• name: отображаемое имя предварительного просмотра.

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

• widthDp: максимальная ширина в dp.

• heightDp: максимальная высота в dp.

• locale: текущая локаль приложения.

• showBackground: флаг, определяющий, следует ли применять к предварительному просмотру цвет фона по умолчанию.

• backgroundColor: 32-разрядное целое число цвета ARGB, задающее цвет фона предварительного просмотра.

Поддерживаемые конфигурации

В зависимости от версий зависимостей и стиля конфигурации проекта для включения предварительного просмотра Compose можно использовать несколько поддерживаемых сочетаний:

• Compose Multiplatform 1.9 со старой аннотацией @Preview и Android, настроенным с помощью androidTarget {}.

• Compose Multiplatform 1.10 со старой аннотацией @Preview и Android, настроенным с помощью androidTarget {}.

• Compose Multiplatform 1.10 с новой аннотацией @Preview и Android, настроенным с помощью androidTarget {}.

• Compose Multiplatform 1.10 с новой аннотацией @Preview и Android, настроенным с помощью androidLibrary {} при AGP 9.0. Подробную информацию об обновлении приложений KMP см. в руководстве по переходу на AGP 9.0.