Compose 中的样式

Style API 是一种用于自定义或“设置样式”Jetpack Compose 中的元素和组件的新范例，以前通常通过修饰符来实现。旨在实现更深入、更轻松的自定义。

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

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

样式的优势

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

核心概念

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

开始使用：添加依赖项

如需在自己的项目中使用这些 API，请确保您使用的是最新版 Jetpack Compose 基础库 Alpha 版。在 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" }