Android Compose：如何仅为Box绘制左右两侧阴影？

直接用三层嵌套Box的方式就能精准实现需求，左右单独做阴影层，中间是主内容，彻底避免顶部和底部出现阴影：

实现代码 #

@Composable
fun HorizontalShadowBox(
    modifier: Modifier = Modifier,
    cornerRadius: Dp = 8.dp,
    shadowColor: Color = Color.Black.copy(alpha = 0.2f),
    shadowElevation: Dp = 4.dp,
    backgroundColor: Color = Color.White,
    content: @Composable () -> Unit
) {
    Box(modifier = modifier) {
        // 左侧阴影层：仅生成左圆角的阴影，宽度等于阴影高度
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .width(shadowElevation)
                .align(Alignment.CenterStart)
                .shadow(
                    elevation = shadowElevation,
                    shape = RoundedCornerShape(topStart = cornerRadius, bottomStart = cornerRadius),
                    clip = false,
                    ambientColor = shadowColor,
                    spotColor = shadowColor
                )
        )

        // 右侧阴影层：仅生成右圆角的阴影，宽度等于阴影高度
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .width(shadowElevation)
                .align(Alignment.CenterEnd)
                .shadow(
                    elevation = shadowElevation,
                    shape = RoundedCornerShape(topEnd = cornerRadius, bottomEnd = cornerRadius),
                    clip = false,
                    ambientColor = shadowColor,
                    spotColor = shadowColor
                )
        )

        // 主内容层：带圆角的背景，覆盖阴影层的多余部分，确保上下无阴影
        Box(
            modifier = Modifier
                .fillMaxSize()
                .clip(RoundedCornerShape(cornerRadius))
                .background(backgroundColor)
        ) {
            content()
        }
    }
}

使用示例 #

@Composable
fun Demo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        HorizontalShadowBox(
            cornerRadius = 12.dp,
            shadowElevation = 6.dp,
            modifier = Modifier.size(width = 220.dp, height = 140.dp)
        ) {
            Text(
                text = "左右阴影效果",
                modifier = Modifier.align(Alignment.Center),
                fontSize = 18.sp,
                fontWeight = FontWeight.Medium
            )
        }
    }
}

关键说明 #

• 左右阴影层通过width(shadowElevation)限制阴影的横向范围，clip=false保证阴影不会被自身裁剪
• 主内容层的clip和background会完全覆盖上下方向的阴影残留，彻底实现仅左右有阴影的效果
• 所有参数都可自定义，适配不同的圆角大小、阴影深浅和背景色

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