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

По умолчанию отступы текста с заданным lineHeight обрезаются

С появлением поддержки LineHeightStyle.Trim поведение обрезки отступов текста в Compose Multiplatform стало таким же, как в Android. Подробности см. в запросе на включение изменений.

Это соответствует изменениям compose.material из выпуска 1.6.0-alpha01:

• Параметр includeFontPadding по умолчанию стал false в Android. Чтобы разобраться в этом изменении подробнее, см. обсуждение отказа от реализации этого флага в Compose Multiplatform.

• Стиль высоты строки по умолчанию изменен на Trim.None и Alignment.Center. Теперь Compose Multiplatform поддерживает LineHeightStyle.Trim и использует Trim.None в качестве значения по умолчанию.

• В TextStyle для Typography были добавлены явные lineHeight, что привело к следующему критическому изменению.

При использовании fontSize в MaterialTheme необходимо указывать lineHeight

Если задать атрибут fontSize для компонента Text в MaterialTheme, но не указать lineHeight, фактическая высота строки не будет изменена в соответствии со шрифтом. Теперь при каждом задании соответствующего fontSize необходимо явно указывать атрибут lineHeight.

Jetpack Compose теперь рекомендует не задавать размер шрифта напрямую:

Новый подход к организации ресурсов

Если вы использовали API ресурсов в предварительных версиях Compose Multiplatform 1.6.0, ознакомьтесь с документацией для текущей версии: в 1.6.0-beta01 изменился способ хранения файлов ресурсов в папках проекта, чтобы они были доступны коду проекта.

Улучшенный API ресурсов (все платформы)

Новый экспериментальный API поддерживает строки и шрифты и упрощает совместное использование ресурсов и доступ к ним в общем коде Kotlin:

• Ресурсы можно организовать с учетом конкретных настроек и условий, для которых они предназначены, в том числе:

  • Локали

  • Разрешения изображений

  • Темные и светлые темы

• Теперь Compose Multiplatform создает объект Res для каждого проекта, чтобы упростить доступ к ресурсам.

Подробнее о квалификаторах ресурсов и новом API ресурсов см. в разделе Изображения и ресурсы.

API для тестирования пользовательского интерфейса (экспериментальный, все платформы)

Экспериментальный API для тестирования пользовательского интерфейса с помощью Compose Multiplatform, ранее доступный для desktop и Android, теперь поддерживает все платформы. Вы можете писать и запускать общие тесты, проверяющие поведение пользовательского интерфейса приложения на платформах, поддерживаемых фреймворком. В API используются те же средства поиска, утверждения, действия и сопоставители, что и в Jetpack Compose.

Инструкции по настройке и примеры тестов см. в разделе Тестирование пользовательского интерфейса Compose Multiplatform.

Изменения из Jetpack Compose и Material 3 (все платформы)

Отдельные представления платформы для всплывающих окон, диалоговых окон и раскрывающихся списков (iOS, desktop)

Иногда важно, чтобы всплывающие элементы (например, всплывающие подсказки и раскрывающиеся меню) не ограничивались изначальным холстом composable или окном приложения. Это особенно актуально, если представление composable не занимает весь экран, но должно отображать диалоговое окно с предупреждением. В версии 1.6.0 появилась возможность надежно реализовать такое поведение.

Обратите внимание: всплывающие окна и диалоговые окна по-прежнему не могут рисовать за пределами собственных границ (например, тень самого верхнего контейнера).

ComposeUIViewController(
    configure = {
        platformLayers = false
    }
) {
    // your Compose code
}

Desktop (экспериментальная версия)

Чтобы использовать эту возможность в desktop, задайте системное свойство compose.layers.type. Поддерживаемые значения:

• WINDOW — для создания компонентов Popup и Dialog в отдельных окнах без оформления.

• COMPONENT — для создания Popup или Dialog в качестве отдельного компонента Swing в том же окне. Работает только при рендеринге вне экрана, если для compose.swing.render.on.graphics задано значение true (см. раздел Улучшенная интеграция со Swing в примечаниях к выпуску Compose Multiplatform 1.5.0). Обратите внимание: рендеринг вне экрана работает только для компонентов ComposePanel, а не для приложений с полноценным окном.

Пример кода, использующего свойство COMPONENT:

@OptIn(ExperimentalComposeUiApi::class) fun main() = SwingUtilities.invokeLater { System.setProperty("compose.swing.render.on.graphics", "true") System.setProperty("compose.layers.type", "COMPONENT") val window = JFrame() window.defaultCloseOperation = WindowConstants.EXIT_ON_CLOSE val contentPane = JLayeredPane() contentPane.layout = null val composePanel = ComposePanel() composePanel.setBounds(200, 200, 200, 200) composePanel.setContent { ComposeContent() } composePanel.windowContainer = contentPane // Use the full window for dialogs contentPane.add(composePanel) window.contentPane.add(contentPane) window.setSize(800, 600) window.isVisible = true } @Composable fun ComposeContent() { Box(Modifier.fillMaxSize().background(Color.Green)) { Dialog(onDismissRequest = {}) { Box(Modifier.size(100.dp).background(Color.Yellow)) } } }

Dialog (желтый цвет) отображается полностью независимо от границ родительского ComposePanel (зеленый цвет):

Поддержка стилей линий текстового оформления (iOS, desktop, web)

Теперь в Compose Multiplatform можно задавать стиль подчеркивания текста с помощью класса PlatformTextStyle.

Пример задания пунктирного подчеркивания:

Text(
  "Hello, Compose",
  style = TextStyle(
    textDecoration = TextDecoration.Underline,
    platformStyle = PlatformTextStyle (
      textDecorationLineStyle = TextDecorationLineStyle.Dotted
    )
  )
)

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

Доступ к установленным в системе шрифтам (iOS, desktop, web)

Теперь ваше приложение Compose Multiplatform может обращаться к шрифтам, установленным в системе. Используйте класс SystemFont для загрузки шрифтов с нужными стилями и насыщенностью:

import androidx.compose.ui.text.platform.SystemFont

FontFamily(SystemFont("Menlo", weight = 700))
FontFamily(SystemFont("Times New Roman", FontWeight.Bold))
FontFamily(SystemFont("Webdings"))

В desktop можно использовать функцию FontFamily, чтобы загрузить все возможные стили шрифта, указав только название семейства шрифтов (подробный пример см. в образце кода):

FontFamily("Menlo")

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

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

• Программы чтения с экрана и VoiceOver могут получать доступ к содержимому пользовательского интерфейса Compose.

• Пользовательский интерфейс Compose поддерживает те же жесты навигации и взаимодействия, что и нативные интерфейсы.

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

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

Изменение прозрачности представления composable

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

val appController = ComposeUIViewController(configure = {
      this.opaque = false
}) {
    App()
}

Пример того, чего можно добиться с помощью прозрачного фона:

Выделение текста в SelectionContainer двойным и тройным касанием

Ранее в Compose Multiplatform для iOS многократное касание позволяло выделять текст только в полях ввода. Теперь двойное и тройное касания также позволяют выделять текст в компонентах Text внутри SelectionContainer.

Взаимодействие с UIViewController

Некоторые нативные API, не реализованные в виде UIView, например UITabBarController или UINavigationController, нельзя было встроить в интерфейс Compose Multiplatform с помощью существующего механизма взаимодействия.

Теперь в Compose Multiplatform реализована функция UIKitViewController, которая позволяет встраивать нативные контроллеры представлений iOS в пользовательский интерфейс Compose.

Поведение курсора при коротком и длительном касании в текстовых полях, как в нативном интерфейсе

Compose Multiplatform стал еще ближе к нативному поведению курсора в текстовом поле iOS:

• После одиночного касания курсор в текстовом поле позиционируется точнее.

• Длительное касание с перетаскиванием в текстовом поле перемещает курсор, а не включает режим выделения, как в Android.

Экспериментальная поддержка улучшенного смешивания при взаимодействии

Раньше представление для взаимодействия, реализованное с помощью обертки SwingPanel, всегда имело прямоугольную форму и всегда находилось на переднем плане поверх всех компонентов Compose Multiplatform. Из-за этого было сложно использовать всплывающие элементы (раскрывающиеся меню, всплывающие уведомления). Новая реализация решает эту проблему и позволяет использовать Swing в следующих сценариях:

• Обрезка. Теперь вас не ограничивает прямоугольная форма: модификаторы обрезки и тени корректно работают с SwingPanel.

  // Flag necessary to enable the experimental blending 
  System.setProperty("compose.interop.blending", "true")
  
  SwingPanel(
      modifier = Modifier.clip(RoundedCornerShape(6.dp))
      //...
  )
  

  Слева показано, как обрезается JButton без этой возможности, а справа — с экспериментальным смешиванием:

  

• Перекрытие. Поверх SwingPanel можно отобразить любое содержимое Compose Multiplatform и взаимодействовать с ним как обычно. Здесь «Snackbar» находится поверх панели Swing и содержит кнопку ОК, на которую можно нажать:

  

Известные ограничения и дополнительные сведения см. в описании запроса на включение изменений.

Артефакты Kotlin/Wasm доступны в стабильных версиях фреймворка

Стабильные версии Compose Multiplatform теперь поддерживают целевые платформы Kotlin/Wasm. После перехода на версию 1.6.0 вам не нужно указывать в списке зависимостей конкретную версию dev-wasm библиотеки compose-ui.