API стилей — это новая парадигма для настройки или «стилизации» элементов и компонентов в Jetpack Compose, которая традиционно осуществлялась с помощью модификаторов. Он разработан для обеспечения более глубокой и простой настройки.
API стилей повышает гибкость при работе с различными форм-факторами, обеспечивает лучшую производительность и упрощает создание пользовательских систем дизайна. Даже если вам не нужны пользовательские компоненты, API стилей предоставляет множество преимуществ для вашей системы дизайна.
Важно отметить, что стили не заменяют модификаторы, но заменяют параметры стиля, такие как отступы и цвета. Мы рекомендуем перейти на использование стилей вместо параметров для повышения гибкости и производительности.
Преимущества стилей
- Упрощает стилизацию на основе состояний: API предоставляет более лаконичный и декларативный способ определения стилей, изменяющихся в зависимости от различных состояний (например, при наведении курсора, фокусировке, нажатии), что значительно сокращает объем шаблонного кода по сравнению с системой модификаторов.
- Улучшает анимацию переходов между состояниями: API стилей позволяет создавать встроенную анимацию свойств стиля между состояниями с оптимальными характеристиками производительности, избегая перекомпозиций, которые происходят при текущем подходе
animateColorAsState. - Упрощает API компонентов: благодаря введению единого параметра Style для настройки, API компонентов значительно упрощаются и обеспечивают большую гибкость.
- Меньшее количество перекомпозиций обеспечивает лучшую производительность по сравнению с модификаторами: стили выполняются на этапах отрисовки и компоновки в процессе композиции, минуя этап композиции.
- Более стандартизированный набор API: стандартный набор стилистических свойств позволяет стилизовать любой компонент.
Основные концепции
| Концепция | Описание |
|---|---|
Style | Интерфейс, определяющий внешний вид элемента пользовательского интерфейса, со стандартным набором стилизуемых свойств. Он похож на стили CSS и может быть настроен локально или через тему оформления. Стили переопределяют друг друга; установка свойства дважды (например, background() ) приводит к одному конечному значению. |
StyleScope | Область видимости для функции applyStyle() внутри стиля. Она предоставляет функции для определения визуальных свойств (отступы, фон, граница и т. д.) и доступа к текущему StyleState ). |
StyleState | Предоставляет состояние (например, isEnabled , isPressed , isChecked , пользовательские состояния), которое можно использовать внутри стиля для определения условного стиля. |
Начните: добавьте зависимости
Чтобы использовать API в своем проекте, убедитесь, что вы используете последнюю альфа-версию Jetpack Compose Foundation. В файле settings.gradle.kts добавьте репозиторий Maven snapshot в список используемых репозиториев.
Установите версию Compose на 1.11.0-alpha06 либо в файле libs.versions.toml , либо непосредственно в файле app/build.gradle.kts .
compose = "1.11.0-alpha06"
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" }