Jetpack Compose中无法修改Card阴影颜色问题求助

我使用Jetpack Compose的Card组件制作不同样式的按钮，希望调整为目标UI效果，但尝试多种方案均无效，核心需求是修改Card的阴影颜色，找不到合适的实现方法。

当前实现代码 #

Card(
            elevation = 4.dp,
            backgroundColor = Color.White,
            modifier = Modifier
                .fillMaxSize()
                .padding(10.dp)
        ) {
            Column(modifier = Modifier.padding(10.dp)) {
                Text("Subscription", fontWeight = FontWeight.W700, color = brc_red)
                Card(
                    backgroundColor = Color(0xFFBDFCBB).compositeOver(brc_green_color),
                    elevation = 6.dp,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(20.dp)
                        .clickable {
                            Toast
                                .makeText(context, "Suiiiii", Toast.LENGTH_SHORT)
                                .show()
                        }
                        .drawWithContent {
                            val paddingPx = with(density) { 5.dp.toPx() }
                            clipRect(
                                left = -paddingPx,
                                top = 0f,
                                right = size.width + paddingPx,
                                bottom = size.height + paddingPx,
                            ) {
                                this@drawWithContent.drawContent()
                            }
                        }
                    //   backgroundColor = Color(0xFF4CB849).compositeOver(brc_green_color)
                ) {
                    Row(
                        horizontalArrangement = Arrangement.SpaceBetween,
                        modifier = Modifier.padding(10.dp)
                    ) {
                        Text(text = "Yearly")
                        Text(text = "$ 10 Per Year")
                    }
                }
                Card(
                    elevation = 6.dp,
                    backgroundColor = Color(0xFFFD6459).compositeOver(brc_green_color),
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(20.dp)
                        .clickable {
                            Toast
                                .makeText(context, "Duiii", Toast.LENGTH_SHORT)
                                .show()
                        }
                        .drawWithContent {
                            val paddingPx = with(density) { 5.dp.toPx() }
                            clipRect(
                                left = -paddingPx,
                                top = 0f,
                                right = size.width + paddingPx,
                                bottom = size.height + paddingPx,
                            ) {
                                this@drawWithContent.drawContent()
                            }
                        },
                    ) {
                    Row(
                        horizontalArrangement = Arrangement.SpaceBetween,
                        modifier = Modifier.padding(10.dp)
                    ) {
                        Text(text = "Monthly")
                        Text(text = "$ 1 Per Month")
                    }
                }
                Row(
                    horizontalArrangement = Arrangement.Center,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text(text = "OR", fontWeight = FontWeight.Bold)
                }
                Card(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            Toast
                                .makeText(context, "Nuiii", Toast.LENGTH_SHORT)
                                .show()
                        }
                        .padding(20.dp),
                    elevation = 4.dp,
                    backgroundColor = brc_green_color
                    //   backgroundColor = Color(0xFF4CB849).compositeOver(brc_green_color)
                ) {
                    Row(
                        horizontalArrangement = Arrangement.Center,
                        modifier = Modifier.padding(10.dp)
                    ) {
                        Text(text = "Start your 30 days Free Trail", color = Color.White)
                    }
                }
            }
        }

效果说明 #

• 当前UI：Card使用默认灰色阴影，与卡片自身的主题色（绿色、红色）不匹配
• 期望UI：阴影颜色与卡片主题色一致，增强视觉统一性

解决方案 #

Jetpack Compose默认Card的elevation阴影颜色由主题shadowColor全局控制，无法单独为单个Card修改。因此需要禁用Card的默认elevation，改用Modifier.shadow实现自定义颜色的阴影：

修改后的核心代码示例 #

Yearly卡片（绿色阴影）

Card(
    backgroundColor = Color(0xFFBDFCBB).compositeOver(brc_green_color),
    elevation = 0.dp, // 禁用默认阴影
    modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp)
        // 添加自定义颜色阴影，调整透明度让效果更自然
        .shadow(
            elevation = 6.dp,
            shape = CardDefaults.shape,
            ambientColor = brc_green_color.copy(alpha = 0.3f),
            spotColor = brc_green_color.copy(alpha = 0.5f)
        )
        .clickable {
            Toast.makeText(context, "Suiiiii", Toast.LENGTH_SHORT).show()
        }
        .drawWithContent {
            val paddingPx = with(density) { 5.dp.toPx() }
            clipRect(
                left = -paddingPx,
                top = 0f,
                right = size.width + paddingPx,
                bottom = size.height + paddingPx,
            ) {
                this@drawWithContent.drawContent()
            }
        }
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier.padding(10.dp)
    ) {
        Text(text = "Yearly")
        Text(text = "$ 10 Per Year")
    }
}

Monthly卡片（红色阴影）

Card(
    backgroundColor = Color(0xFFFD6459).compositeOver(brc_green_color),
    elevation = 0.dp, // 禁用默认阴影
    modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp)
        // 添加自定义红色阴影
        .shadow(
            elevation = 6.dp,
            shape = CardDefaults.shape,
            ambientColor = brc_red.copy(alpha = 0.3f),
            spotColor = brc_red.copy(alpha = 0.5f)
        )
        .clickable {
            Toast.makeText(context, "Duiii", Toast.LENGTH_SHORT).show()
        }
        .drawWithContent {
            val paddingPx = with(density) { 5.dp.toPx() }
            clipRect(
                left = -paddingPx,
                top = 0f,
                right = size.width + paddingPx,
                bottom = size.height + paddingPx,
            ) {
                this@drawWithContent.drawContent()
            }
        },
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier.padding(10.dp)
    ) {
        Text(text = "Monthly")
        Text(text = "$ 1 Per Month")
    }
}

原理说明 #

Modifier.shadow允许单独指定阴影的：

• elevation：阴影高度，和原Card的elevation效果一致
• shape：阴影形状，保持和Card默认形状一致，避免错位
• ambientColor：环境光阴影颜色，设置为卡片主题色并降低透明度
• spotColor：点光源阴影颜色，同样使用主题色，透明度略高于环境光阴影，模拟真实光影效果

通过这种方式，就能实现阴影颜色与卡片主题色匹配的目标UI效果。

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