Стили в Compose

Style API – это новая парадигма для настройки и стилизации элементов и компонентов в Jetpack Compose, которая традиционно выполнялась с помощью модификаторов. Она позволяет легко настраивать рекламу.

Styles API повышает гибкость на разных устройствах, улучшает производительность и упрощает создание пользовательских систем проектирования. Даже если вам не нужны пользовательские компоненты, Styles API имеет множество преимуществ для вашей системы проектирования.

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

Преимущества стилей

  • Упрощает стилизацию на основе состояния. API предоставляет более лаконичный и декларативный способ определения стилей, которые меняются в зависимости от различных состояний (например, при наведении, фокусе, нажатии), что значительно сокращает шаблонный код по сравнению с системой модификаторов.
  • Улучшенные анимированные переходы между состояниями. Style API позволяет использовать встроенную анимацию свойств стиля между состояниями с идеальными характеристиками производительности, избегая рекомпозиций, которые происходят при текущем подходе animateColorAsState.
  • Упрощенные API компонентов. Благодаря единому параметру Style для настройки API компонентов стали намного проще и гибче.
  • Меньше рекомпозиций, что приводит к лучшей производительности по сравнению с модификаторами: Стили запускаются на этапах рисования и макета Compose, пропуская этап композиции.
  • Более стандартизированный набор API. Стандартный набор свойств стиля позволяет настраивать стиль любого компонента.

Основные понятия

Концепция Описание
Style Интерфейс, определяющий внешний вид элемента пользовательского интерфейса со стандартным набором настраиваемых свойств. Они похожи на стили CSS и могут быть настроены локально или через тему. Стили перезаписывают друг друга. Если задать свойство дважды (например, background()), будет использоваться только последнее значение.
StyleScope Область видимости получателя для функции applyStyle() в Style. Она предоставляет функции для определения визуальных свойств (отступов, фона, границ и т. д.) и доступа к текущему StyleState.
StyleState Предоставляет состояние (например, isEnabled, isPressed, isChecked, пользовательские состояния), которое можно использовать в стиле для определения условного стиля.

Начало работы: добавление зависимостей

Чтобы использовать API в своем проекте, убедитесь, что у вас установлена последняя альфа-версия Jetpack Compose Foundation. Добавьте репозиторий Maven для снимков в список репозиториев в файле settings.gradle.kts.

В файле libs.versions.toml или app/build.gradle.kts укажите версию Compose 1.12.0-alpha03:

compose = "1.12.0-alpha03"

androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }
Далее
Основы стилей