Jetpack Compose 如何实现透明背景阴影并消除中心背景矩形

问题根源 #

Jetpack Compose 的shadow修饰符默认自带不透明背景填充层，作为阴影的投射承载基底，该填充层默认使用主题Surface配色。你设置的半透明背景无法覆盖该不透明基底，就会出现中心显示不透明矩形的问题。

修复方案 #

方案1（Compose 1.2.0及以上版本，推荐） #

直接为shadow修饰符新增backgroundColor = Color.Transparent参数，关闭默认的不透明填充层即可，修改后代码如下：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .shadow(
            elevation = 3.dp,
            shape = RoundedCornerShape(28.dp),
            backgroundColor = Color.Transparent
        )
        .background(
            MaterialTheme.colors.primary.copy(alpha = 0.8f),
            shape = RoundedCornerShape(28.dp)
        )
        .padding(16.dp)
)

方案2（低版本Compose兼容） #

使用graphicsLayer自定义阴影绘制逻辑，避开默认填充层的限制：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .graphicsLayer {
            shadowElevation = 3.dp.toPx()
            shape = RoundedCornerShape(28.dp)
            clip = true
        }
        .background(
            MaterialTheme.colors.primary.copy(alpha = 0.8f),
            shape = RoundedCornerShape(28.dp)
        )
        .padding(16.dp)
)

补充说明 #

两种方案均保留了你原有需求的圆角、阴影高度、背景透明度参数，修改后即可实现半透明背景带圆角阴影的效果，不会再出现中心不透明的矩形问题。

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