更改卡片高度即更改 Jetpack 中与 Material 3 组合的卡片颜色

Question

我正在使用 Card 可组合项，我希望它的颜色为白色。

但是当我向它添加一些高度时，它会将颜色更改为更像primaryContainer 颜色。

我看过文档，其中有一些称为“elevationOverlay”的东西。但找不到说明如何使用它的示例。

这是我的代码：

Card(
      modifier = Modifier.padding(top = 16.dp),
      colors = CardDefaults.cardColors(containerColor = White),
      elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
}

我确实知道我可以使用提升卡代替卡，但提升卡也存在同样的问题。

另外，这是一个特殊情况，所以我手动应用颜色

Answer 1

这让我困惑了一段时间，但解决方案很简单。Material 3 引入了“色调颜色叠加”的概念来帮助区分海拔 - https://developer.android.com/jetpack/compose/designsystems/material3#elevation

您可以通过使用这行代码从主题获取颜色来深入研究此代码

MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp)

单击该surfaceColorAtElevation行的命令会显示该函数和返回值，如下所示：

返回： ColorScheme.surface 颜色，其上覆盖有 ColorScheme.surfaceTint 颜色的 alpha。

所以从这里我可以看到有一个主题颜色叫做surfaceTint。

如果您像我一样希望您的卡片是一种颜色，例如白色，并且让它们在所有高度都保持白色，那么您所需要做的就是将颜色设置surfaceTint为与卡片相同的颜色。然后，在所有海拔高度，它都会用相同颜色的 Alpha 着色，结果容器颜色不会发生变化。

private val LightColorScheme = lightColorScheme(
    primary = Blue200,
    secondary = Blue100,
    tertiary = Blue50,
    primaryContainer = Color.White,
    surface = Color.White,
    background = Color.White,
    surfaceVariant = Color.White,
    surfaceTint = Color.White // THIS ONE
)

Answer 2

尝试多种方法后发现，除了查看 SDK 中的 Card.kt 文件并创建类似的内容但禁用 tonalColor 之外，没有其他方法可以覆盖此设置（感谢提示 @ianhanniballake 它正在使用 tonalelevation）

以下代码应该可以完成工作，直到官方支持覆盖：

@Composable
fun CardWithoutTonalElevation(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: Color = White,
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: @Composable ColumnScope.() -> Unit = {}
)  {
    Surface(
        modifier = modifier,
        shape = shape,
        color = colors,
        tonalElevation = 0.dp,
        shadowElevation = elevation,
        border = border,
    ) {
        Column(content = content)
    }
}