Android Jetpack Compose：深色内容容器阴影无法正常显示的问题求助

你遇到的问题是Jetpack Compose中Modifier.shadow()的默认行为导致的：阴影会绘制在元素下方，当元素本身颜色很深时，会和阴影产生视觉上的叠加抵消，深色占比越高，阴影的视觉强度就越弱。

解决方案：分离阴影与容器内容绘制 #

最可靠的解决方式是用独立容器承载阴影，再把内容容器放在阴影之上，避免阴影和内容颜色混合。修改后的代码如下：

@Composable
fun TestComposable() {
    Column(
        Modifier
            .fillMaxSize()
            .background(color = Color.White)) {
        ShadowCardView(Color.Black)
        ShadowCardView(Color.DarkGray)
        ShadowCardView(Color.White)
    }
}

@Composable
fun ShadowCardView(color: Color) {
    val shape = RoundedCornerShape(15.dp)
    // 独立Box承载阴影
    Box(
        modifier = Modifier
            .padding(start = 50.dp, top = 50.dp)
            .width(200.dp)
            .height(100.dp)
            .shadow(
                elevation = 20.dp,
                spotColor = Color.Red,
                ambientColor = Color.Red,
                shape = shape
            )
    ) {
        // 内容Surface覆盖在阴影之上
        Surface(
            modifier = Modifier.matchParentSize(),
            shape = shape,
            color = color
        ) {}
    }
}

这种方式下，阴影单独绘制在Box上，Surface仅作为内容容器覆盖在阴影上方，不会和阴影产生颜色叠加，无论内容是深色还是浅色，阴影都能完整显示。

如果不想额外嵌套容器，也可以尝试调整阴影颜色的对比度（比如增加亮度或透明度），但这种方式适配性较差，不同深色内容的显示效果不稳定，不如分离绘制的方案可靠。

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