Jetpack Compose 中表面支持 +（...％）颜色。

Question

在官方的Material Design 3资源（例如Figma设计套件）中，有许多称为"Surface at +x"的颜色参考。这些颜色是表面颜色与主色的X％混合而成。

现在我的问题是：

如何在Jetpack Compose中实现"Surface at +x"颜色？没有文档，也没有在MaterialTheme.colorScheme对象上的属性。

Figma设计套件参考：

- BSh

---

你尝试过使用 ColorUtils.blendARGB(color1, color2, 0.12f) 吗？ - Nikola Despotoski

Answer 1

2022年9月更新

使用 Material 3，如果你因某些原因需要凸起颜色表面但无法使用Surface时，现在你可以直接使用：

MaterialTheme.colorScheme.surfaceColorAtElevation(4.dp)

- Vince

Answer 2

如果有人需要非组合代码获取它，请使用 SurfaceColors枚举 ：

int colorSurface1 = SurfaceColors.SURFACE_2.getColor(context);

相关文档可以在这里找到。

- Dannie

Answer 3

默认情况下，Surface使用MaterialTheme.colorScheme.surface，它们还有一个新的tonalElevation属性，您可以在这里了解。

要点是增加色调高度会自动更改颜色，请自行尝试：

Surface(tonalElevation = 5.dp) {
    // content
}

- Scott Cooper