在Jetpack Compose中使用Material 3更改卡片高度等同于更改卡片颜色。

Question

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

但是当我添加一些高程时，它的颜色会变成更像primaryContainer颜色。

我看过一些文档，其中有一些叫做elevationOverlay的东西。但是没有找到一个示例说明如何使用它。

这是我的代码：

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

我知道可以使用"抬升卡片（Elevated card）"代替卡片（card），但是"抬升卡片"也存在同样的问题。

此外，这是一个特殊情况，所以我正在手动应用颜色。

- nayan dhabarde

---

听起来你正在经历 Material3 的一部分——高程度差异，这是正常现象。 - ianhanniballake

Answer 1

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

您可以通过使用此行代码从主题中获取颜色来深入了解其代码

MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp)

在 surfaceColorAtElevation 行上执行命令点击，可以显示函数和返回值，如下所述：

返回： 带有 ColorScheme.surfaceTint 颜色叠加在其上的 ColorScheme.surface 颜色。

因此，从这里我可以看到有一个名为 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
)

- Vin Norman

---

添加 surfaceTint 很有帮助。谢谢！ - Bogdan Stolyarov

如果需要在XML布局中进行更改，解决方案是什么？带有高度的卡片看起来不同。 - takharsh

Answer 2

为了解决在使用Material Design 3中的Jetpack Compose修改卡片高度时导致颜色改变的问题，可以使用背景修饰符并传递一个颜色对象来设置所需颜色。此外，您还可以使用elevationOverlay参数来设置覆盖层颜色。

以下是您代码的更新示例：

Card(
  modifier = Modifier.padding(top = 16. dp)
  .background(color = Color.White),
  elevation = CardDefaults.cardElevation(defaultElevation = 2. dp),
  elevationOverlay = Color.White
) {}

- Fruze Lee

---

fun Card( modifier: Modifier = Modifier, shape: Shape = CardDefaults.shape, colors: CardColors = CardDefaults.cardColors(), elevation: CardElevation = CardDefaults.cardElevation(), border: BorderStroke? = null, content: @Composable ColumnScope.() -> Unit ) { 这是 Material3 Jetpack Compose 的卡片构造函数，没有高程叠加。 - nayan dhabarde

Answer 3

经过多次尝试，发现除了查看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)
    }
}

- nayan dhabarde

Answer 4

让我们看看一个简单的Material Design 3的Card以及它在Compose中的elevation是如何工作的。

首先，什么构成了一个简单的Card？

- 一个简单的Card只是一个内部有Column的Surface。 - 一个ElevatedCard只是一个具有更高elevation默认值的Card。

其次，一个Card的elevation由什么构成？

- 首先，是其底层Surface的tonalElevation。 - 其次，是其底层Surface的shadowElevation。

如果你想要一个带有shadowElevation但没有tonalElevation的简单Material Design 3的Card，你可以像这样自己制作一个Surface和Column的组合：

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.unit.*

@Composable
fun ShadyCard(
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.elevatedShape,
    color: Color = MaterialTheme.colorScheme.surface,
    contentColor: Color = contentColorFor(color),
    shadowElevation: Dp = 1.0.dp,
    border: BorderStroke? = null,
    content: @Composable ColumnScope.() -> Unit,
) {
    Surface(
        modifier = modifier,
        shape = shape,
        color = color,
        contentColor = contentColor,
        shadowElevation = shadowElevation,
        border = border,
    ) {
        Column(content = content)
    }
}

如果需要点击Card，则需要添加交互处理，因为根据Material Design 3规范，不同的卡片状态可能具有不同的高度级别。 （交互处理不在我的回答范围内。）

- Arthur Khazbs

Answer 5

您可以尝试使用一些阴影并去除高程，方法如下：

Card(
        modifier = Modifier
            .fillMaxWidth()
            .shadow(
                elevation = 4.dp,
                shape = RoundedCornerShape(8.dp),
            ),

- Joel Kanyi

Answer 6

一种解决方法...

Card(
    modifier = Modifier          
        .shadow(
            elevation = 8.dp,
            shape = RoundedCornerShape(4.dp)
        ),
    elevation = CardDefaults.cardElevation(0.dp),
    colors = CardDefaults.cardColors(
        containerColor = Color.white
    )

- X-Black...

Answer 7

嗯，与其

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

你应该使用

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

如果在其中使用了高度（elevation），那么卡片就会有高度感 :)

- FOOKTHISOFFICIAL