样式 API 是一种用于自定义或“设置样式”Jetpack Compose 中的元素和组件的新范例,传统上,此操作是通过修饰符完成的。它旨在实现更深入、更轻松的自定义。
样式 API 提高了跨各种尺寸规格的灵活性,提供了更好的性能,并支持更轻松地创建自定义设计系统。即使您不需要自定义组件,样式 API 也能为您的设计系统带来许多好处。
一个重要的区别是,样式不是修饰符的替代品,但它们确实可以替代样式参数,例如内边距和颜色。 我们建议您改用样式而不是参数,以提高灵活性和性能。
样式的优势
- 简化了基于状态的样式设置 :与修饰符系统相比,该 API 提供了一种更简洁、更具声明性的方式来定义根据不同状态(例如,悬停、聚焦、按下)而变化的样式,从而显著减少了样板代码。
- 改进了动画状态转换 :样式 API 允许在状态之间内置样式属性动画,并具有理想的性能特征,避免了当前
animateColorAsState方法中发生重组的情况。 - 简化了组件 API :通过引入单个样式参数进行自定义,组件 API 得到了显著简化,并提供了更大的灵活性。
- 减少了重组,从而提高了性能 :样式在 Compose 的绘制和布局阶段运行,跳过了组合阶段。
- 更标准化的 API 集 :一组标准的样式属性使任何组件都可设置样式。
核心概念
| 概念 | 说明 |
|---|---|
Style |
一个接口,用于定义界面元素的外观,并具有一组标准的样式属性。它类似于 CSS 样式,并且可以在本地或通过主题进行自定义。样式会相互覆盖;如果将某个属性设置两次(例如,background()),则只会保留一个最终值。 |
StyleScope |
样式中 applyStyle() 函数的接收器范围。它提供了用于定义视觉属性(内边距、背景、边框等)和访问当前 StyleState 的函数。 |
StyleState |
提供状态(例如,isEnabled、isPressed、isChecked、自定义状态),您可以在样式中使用这些状态来定义条件样式。 |
开始使用:添加依赖项
如需在自己的项目中使用这些 API,请确保您使用的是最新 Alpha 版的 Jetpack Compose 基础库。在 settings.gradle.kts 文件中,将快照 Maven 代码库添加到要使用的代码库列表中。
在 libs.versions.toml 文件中或直接在 app/build.gradle.kts 文件中,将 Compose 的版本设置为 1.11.0-alpha06:
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" }