Jetpack Compose(Material3)中Card设置elevation导致颜色异常

问题原因 #

在Material 3的Compose组件体系中，给Card设置elevation时，默认会启用elevation overlay机制：它会根据组件的elevation值，在你指定的容器颜色上叠加一层主题关联的色调（也就是你看到的类似primaryContainer的颜色），以此模拟阴影的视觉层级效果，这就是白色卡片变色的核心原因。

解决方案 #

1. 给单个Card禁用叠加色（推荐，适配特殊场景）

直接在CardDefaults.cardColors中设置elevationOverlayColor为透明，既能保留阴影效果，又不会改变你设置的白色容器色：

Card(
    modifier = Modifier.padding(top = 16.dp),
    colors = CardDefaults.cardColors(
        containerColor = Color.White,
        elevationOverlayColor = Color.Transparent // 关键：取消叠加色
    ),
    elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
) {
    // 卡片内容区域
}

2. 全局禁用elevation overlay（不推荐，除非全APP不需要该效果）

如果你的整个应用都不需要elevation叠加色，可以在自定义MaterialTheme时关闭该功能：

MaterialTheme(
    colorScheme = lightColorScheme(
        elevationOverlayEnabled = false // 全局禁用叠加机制
    ),
    typography = Typography,
    shapes = Shapes
) {
    // 应用内容
}

3. 针对ElevatedCard的处理

如果使用ElevatedCard遇到同样问题，只需在ElevatedCardDefaults.elevatedCardColors中做同样设置即可：

ElevatedCard(
    modifier = Modifier.padding(top = 16.dp),
    colors = ElevatedCardDefaults.elevatedCardColors(
        containerColor = Color.White,
        elevationOverlayColor = Color.Transparent
    ),
    elevation = ElevatedCardDefaults.cardElevation(defaultElevation = 2.dp)
) {
    // 卡片内容
}

内容的提问来源于stack exchange，提问作者nayan dhabarde