Jetpack Compose中如何为Card设置渐变背景，解决设置后仍为白色的问题

问题原因 #

Jetpack Compose的Card组件自带默认的白色容器背景，优先级高于你给Card的Modifier设置的背景属性。你写的渐变背景实际是绘制在Card自带容器背景的下层，会被白色完全覆盖，所以只能看到Card外部父区域的渐变效果，Card本身还是白色。

修复方案 #

因为Card的容器颜色参数仅支持固定Color值，不支持渐变Brush，所以可以用两种方案实现渐变效果：

方案1：将Card容器颜色设为透明 #

把Card自带的容器背景设为透明，下层Modifier设置的渐变就能正常显示，写法最简洁，无需额外嵌套布局。

Material 3 版本代码：

@Composable 
fun GradientCard() {
    val horizontalGradientBrush = Brush.horizontalGradient(
        colors = listOf(
            Blue,
            LightBlue
        )
    )

    Card(
        modifier = Modifier.background(brush = horizontalGradientBrush),
        shape = RoundedCornerShape(20.dp),
        colors = CardDefaults.cardColors(containerColor = Color.Transparent)
    ){
        Text(
            text = "sub 1",
            modifier = Modifier.padding(16.dp),
            color = Color.White
        )
    }
}

Material 2 版本代码：

@Composable 
fun GradientCard() {
    val horizontalGradientBrush = Brush.horizontalGradient(
        colors = listOf(
            Blue,
            LightBlue
        )
    )

    Card(
        modifier = Modifier.background(brush = horizontalGradientBrush),
        shape = RoundedCornerShape(20.dp),
        backgroundColor = Color.Transparent
    ){
        Text(
            text = "sub 1",
            modifier = Modifier.padding(16.dp),
            color = Color.White
        )
    }
}

方案2：给Card内部根布局设置渐变 #

无需修改Card的默认属性，直接在Card的内容根布局加渐变背景，适合需要保留Card其他默认样式的场景：

@Composable 
fun GradientCard() {
    val horizontalGradientBrush = Brush.horizontalGradient(
        colors = listOf(
            Blue,
            LightBlue
        )
    )

    Card(
        shape = RoundedCornerShape(20.dp)
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(brush = horizontalGradientBrush)
                .padding(16.dp)
        ) {
            Text(text = "sub 1", color = Color.White)
        }
    }
}

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