Compose 中的样式

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

样式 API 提高了跨各种尺寸规格的灵活性,提供了更好的性能,并支持更轻松地创建自定义设计系统。即使您不需要自定义组件,样式 API 也能为您的设计系统带来许多好处。

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

样式的优势

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

核心概念

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

开始使用:添加依赖项

如需在自己的项目中使用这些 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" }