Compose 中的样式

Style API 是一种在 Jetpack Compose 中自定义元素和组件或为其设置“样式”的新范式，传统上，这些操作是通过修饰符完成的。旨在实现更深入、更轻松的自定义。

Styles API 提高了各种设备规格的灵活性，提供了更好的性能，并使自定义设计体系的创建更加轻松。即使您不需要自定义组件，Styles API 也能为您的设计体系带来诸多益处。

一个重要的区别是，样式不能替代修饰符，但可以替代样式参数，例如内边距和颜色。 我们建议您改用样式（而非参数），以提高灵活性和性能。

样式的优势

  • 简化基于状态的样式设置：该 API 提供了一种更简洁、更具声明性的方式来定义根据不同状态（例如悬停、聚焦、按下）而变化的样式，与修饰符系统相比，可显著减少样板代码。
  • 改进了动画状态转换：Style API 允许在状态之间内置样式属性动画，具有理想的性能特征，可避免当前 animateColorAsState 方法发生的重组。
  • 简化组件 API：通过引入单个 Style 参数进行自定义，组件 API 得到了极大简化，并提供了更大的灵活性。
  • 重组次数更少，性能优于修饰符：样式在 Compose 的绘制和布局阶段运行，跳过了组合阶段。
  • 更标准化的 API 集：一组标准的样式属性，可让任何组件都可设置样式。

核心概念

概念 说明
Style 一种接口，用于定义界面元素的外观，并提供一组标准的可样式化属性。它类似于 CSS 样式，可以在本地或通过主题进行自定义。样式会相互覆盖；如果将某个属性设置两次（例如 background()），则会产生一个最终值。
StyleScope Style 中 applyStyle() 函数的接收器作用域。它提供了用于定义视觉属性（内边距、背景、边框等）和访问当前 StyleState 的函数。
StyleState 提供可在 Style 中使用的状态（例如 isEnabled、isPressed、isChecked、自定义状态），以定义条件样式。

开始：添加依赖项

如需在您自己的项目中使用这些 API，请确保您使用的是 Jetpack Compose 基础库的最新 Alpha 版。在 settings.gradle.kts 文件中，将快照 Maven 制品库添加到要使用的制品库列表中。

在 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" }
下一页
样式基础知识