Что нового в Compose Multiplatform 1.9.3

Параметры аннотации @Preview

Аннотация @Preview в Compose Multiplatform теперь включает дополнительные параметры для настройки отображения функции @Composable в предварительных просмотрах во время разработки:

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

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

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

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

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

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

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

Эти новые параметры предварительного просмотра распознаются и работают как в IntelliJ IDEA, так и в Android Studio.

Настраиваемые тени

В Compose Multiplatform 1.9.0 появились настраиваемые тени, реализованные на основе новых примитивов и API теней Jetpack Compose. Помимо ранее поддерживаемого модификатора shadow, теперь можно использовать новый API для создания более сложных и гибких эффектов теней.

Для создания разных типов теней доступны два новых примитива: DropShadowPainter() и InnerShadowPainter().

Чтобы применить эти новые тени к компонентам интерфейса, настройте эффекты теней с помощью модификаторов dropShadow или innerShadow:

•         Box(
              Modifier.size(120.dp)
                  .dropShadow(
                      RectangleShape,
                      DropShadow(12.dp)
                  )
                  .background(Color.White)
          )
          Box(
              Modifier.size(120.dp)
                  .innerShadow(
                      RectangleShape,
                      InnerShadow(12.dp)
                  )
          )
     

• 

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

Подробную информацию см. в справочнике по API теней.

Новый API контекстного меню

Мы внедрили новый API Jetpack Compose для настраиваемых контекстных меню в SelectionContainer и BasicTextField. Реализация полностью готова для iOS и веб-платформы, а для настольных платформ доступна начальная поддержка.

Чтобы включить этот новый API, используйте следующую настройку в точке входа приложения:

ComposeFoundationFlags.isNewContextMenuEnabled = true

Подробную информацию см. в справочнике по API контекстного меню.

Тема Material 3 Expressive

Теперь Compose Multiplatform поддерживает экспериментальную тему MaterialExpressiveTheme из библиотеки Material 3. Выразительная тема позволяет настроить приложение Material Design и сделать его более индивидуальным.

Чтобы использовать тему Expressive:

1. Подключите экспериментальную версию Material 3:

   implementation("org.jetbrains.compose.material3:material3:1.9.0-alpha04")
   

2. Настройте общую тему элементов интерфейса с помощью функции MaterialExpressiveTheme(). Для этой функции требуется согласие на использование @OptIn(ExperimentalMaterial3ExpressiveApi::class); она позволяет указать colorScheme, motionScheme, shapes и typography.

Компоненты Material, такие как Button() и Checkbox(), автоматически будут использовать указанные вами значения.

Мультиплатформенные целевые платформы в androidx.compose.runtime:runtime

Чтобы улучшить согласованность Compose Multiplatform с Jetpack Compose, мы добавили поддержку всех целевых платформ непосредственно в артефакт androidx.compose.runtime:runtime.

Артефакт org.jetbrains.compose.runtime:runtime остается полностью совместимым и теперь служит псевдонимом.

runComposeUiTest() с лямбдой suspend

Функция runComposeUiTest() теперь принимает лямбду suspend, что позволяет использовать приостанавливаемые функции, например awaitIdle().

Новый API обеспечивает корректное выполнение тестов на всех поддерживаемых платформах, включая правильную асинхронную обработку в веб-средах:

• Для целевых платформ JVM и Native функция runComposeUiTest() работает аналогично runBlocking(), но пропускает задержки.

• Для веб-целевых платформ (Wasm и JS) она возвращает Promise и выполняет тело теста, пропуская задержки.

Настройка частоты кадров

Теперь Compose Multiplatform для iOS позволяет настраивать предпочтительную частоту кадров для отрисовки компонуемого элемента. Если анимация воспроизводится с рывками, частоту кадров можно увеличить. Если же анимация медленная или статичная, можно выбрать более низкую частоту кадров, чтобы снизить энергопотребление.

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

Modifier.preferredFrameRate(FrameRateCategory.High)

Если для компонуемого элемента требуется конкретная частота кадров, можно задать предпочтительное значение в кадрах в секунду, указав неотрицательное число:

Modifier.preferredFrameRate(30f)

Если применить preferredFrameRate несколько раз в одном дереве @Composable, будет применено наибольшее из заданных значений. Однако аппаратное обеспечение устройства может ограничивать поддерживаемую частоту кадров — обычно максимум составляет 120 Гц.

Параметры IME

В Compose Multiplatform 1.9.0 добавлена поддержка настройки IME для текстовых полей с учетом особенностей iOS. Теперь можно использовать PlatformImeOptions, чтобы настраивать параметры ввода текста UIKit, например тип клавиатуры, автокоррекцию и поведение клавиши возврата, непосредственно в компоненте текстового поля:

BasicTextField(
    value = "",
    onValueChange = {},
    keyboardOptions = KeyboardOptions(
        platformImeOptions = PlatformImeOptions {
            keyboardType(UIKeyboardTypeEmailAddress)
        }
    )
)

Compose Multiplatform для веб-платформы в бета-версии

Compose Multiplatform для веб-платформы перешел в бета-версию — самое время попробовать его. Подробнее о работе, проделанной для достижения этого этапа, читайте в нашей статье в блоге.

На пути к стабильному выпуску мы планируем:

• Реализовать поддержку перетаскивания в мобильных браузерах.

• Улучшить поддержку специальных возможностей.

• Устранить проблемы, связанные с компонентом TextField.

Поддержка специальных возможностей

Теперь Compose Multiplatform обеспечивает начальную поддержку специальных возможностей для веб-целевой платформы. В этой версии программы экранного доступа могут считывать метки описания, а пользователи — переходить к кнопкам и нажимать их в режиме навигации с поддержкой специальных возможностей.

В этой версии пока не поддерживаются следующие функции:

• Специальные возможности для представлений взаимодействия и контейнеров с прокруткой и ползунками.

• Индексы обхода.

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

Например, задав для компонуемого элемента Modifier.semantics { heading() }, вы сообщаете службам специальных возможностей, что этот элемент является заголовком — например, названием главы или подраздела документа. Программы экранного доступа могут использовать эту информацию для навигации по содержимому, позволяя пользователям переходить непосредственно к заголовкам.

Text(
    text = "This is heading", 
    modifier = Modifier.semantics { heading() }
)

Поддержка специальных возможностей теперь включена по умолчанию, но ее можно отключить в любое время, изменив isA11YEnabled:

ComposeViewport(
    viewportContainer = document.body!!,
    configure = { isA11YEnabled = false }
) {
    Text("Hello, Compose Multiplatform for web")
}

skiko.js больше не нужен

Начиная с Compose Multiplatform 1.7.0, skiko.js не требовался для приложений Kotlin/Wasm. В этом выпуске то же самое стало верно и для Kotlin/JS: веб-среда выполнения Skiko теперь поставляется в виде модуля ES и включается непосредственно в скомпилированный JavaScript приложения, поэтому отдельный скрипт skiko.js больше не нужен ни для одной из веб-целевых платформ.

Удалите тег <script src="skiko.js"> из файла index.html.

Новый API для встраивания HTML-содержимого

С помощью новой компонуемой функции WebElementView() можно легко интегрировать HTML-элементы в веб-приложение.

Встроенный HTML-элемент накладывается на область холста в соответствии с размером, заданным в коде Compose. Он перехватывает события ввода в этой области, поэтому Compose Multiplatform их не получает.

Ниже приведен пример использования WebElementView() для создания и встраивания HTML-элемента, который отображает интерактивную карту в приложении Compose:

private val ttOSM =
    "https://www.openstreetmap.org/export/embed.html?bbox=4.890965223312379%2C52.33722052818563%2C4.893990755081177%2C52.33860862450587&layer=mapnik"

@Composable
fun Map() {
    Box(
        modifier = Modifier.fillMaxWidth().fillMaxHeight()
    ) {
        WebElementView(
            factory = {
                (document.createElement("iframe")
                        as HTMLIFrameElement)
                    .apply { src = ttOSM }
            },
            modifier = Modifier.fillMaxSize(),
            update = { iframe -> iframe.src = iframe.src }
        )
    }
}

Обратите внимание: эту функцию можно использовать только с точкой входа ComposeViewport, поскольку CanvasBasedWindow объявлена устаревшей.

Упрощенный API для привязки к графу навигации

В Compose Multiplatform появился новый API для привязки состояния навигации браузера к NavController:

suspend fun NavController.bindToBrowserNavigation()

Новая функция избавляет от необходимости напрямую взаимодействовать с API window, упрощая работу с наборами исходного кода Kotlin/Wasm и Kotlin/JS.

Ранее использовавшаяся функция Window.bindToNavigation() объявлена устаревшей; вместо нее следует использовать новую функцию NavController.bindToBrowserNavigation().

До:

LaunchedEffect(Unit) {
    // Directly interacts with the window object
    window.bindToNavigation(navController)
}

После:

LaunchedEffect(Unit) {
    // Implicitly accesses the window object
    navController.bindToBrowserNavigation()
}

Настройка окон перед отображением

В Compose Multiplatform появились новые компонуемые функции SwingFrame() и SwingDialog(). Они похожи на существующие функции Window() и DialogWindow(), но включают блок init.

Раньше некоторые свойства окна, которые нужно было настроить до его отображения, задать было нельзя. Новый блок init выполняется до появления окна или диалогового окна на экране, поэтому в нем можно настроить такие свойства, как java.awt.Window.setType, или добавить обработчики событий, которые должны быть готовы заранее.

Рекомендуем использовать блок init только для свойств, которые нельзя изменить после отображения окна или диалогового окна. Для всех остальных настроек продолжайте использовать шаблон LaunchedEffect(window), чтобы код оставался совместимым и корректно работал в будущих версиях.

Независимое управление версиями Material3

Версии и уровни стабильности библиотеки Material3 и плагина Gradle Compose Multiplatform больше не должны совпадать. Псевдоним DSL compose.material3 ссылается на Material3 1.9.0 из стабильного выпуска Jetpack Compose, однако для проекта можно выбрать предварительную версию.

Чтобы использовать версию Material3 с поддержкой выразительного дизайна, замените зависимость Material 3 в build.gradle.kts на следующую:

implementation("org.jetbrains.compose.material3:material3:1.9.0-alpha04")

Унифицированная сборка для веб-платформы

Новая задача Gradle composeCompatibilityBrowserDistribution объединяет дистрибутивы Kotlin/JS и Kotlin/Wasm в один пакет. Благодаря этому приложения Wasm могут переключаться на целевую платформу JS, если браузер не поддерживает современные возможности Wasm.

Поддержка AGP 9.0.0

В Compose Multiplatform добавлена поддержка Android Gradle Plugin (AGP) версии 9.0.0. Для совместимости с новой версией AGP обновите Compose Multiplatform до версии 1.9.3 или 1.10.0.

Чтобы упростить обновление в долгосрочной перспективе, рекомендуем изменить структуру проекта и использовать отдельный модуль Android-приложения.