如何在Jetpack Compose中实现这种实色阴影叠加效果？

你之前用padding调整阴影位置的思路不对——padding会在Box内部添加空间，导致阴影本身尺寸缩小，无法达到和按钮同尺寸的偏移效果。正确的做法是用offset修饰符来移动阴影层，同时保证阴影和按钮的尺寸、形状完全一致。

修改后的代码如下：

Box(modifier = Modifier.wrapContentSize()) {
    // 实色阴影层：通过offset实现偏移，不改变自身尺寸
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(92.dp)
            .clip(RoundedCornerShape(16.dp))
            .background(JordyBlue)
            .offset(y = 10.dp) // 向下偏移10dp，模拟阴影突出效果
    )

    Button(
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(16.dp),
        colors = ButtonDefaults.buttonColors(containerColor = Portage),
        modifier = Modifier
            .fillMaxWidth()
            .height(92.dp)
    ) {
        Text(
            text = "Continue",
            fontFamily = RobotoFamily,
            fontWeight = FontWeight.SemiBold,
            fontSize = 20.sp,
            color = Color.White
        )
    }
}

关键修改说明： #

• 替换padding为offset：offset仅改变组件绘制位置，不会压缩自身尺寸，确保阴影和按钮保持相同大小，偏移后形成叠加效果
• 统一形状与尺寸：阴影层和按钮的宽高、圆角完全一致，保证视觉匹配
• 灵活调整偏移方向：需要阴影向左/右偏移时，可添加x = xOffset.dp参数（例如offset(x = 5.dp, y = 10.dp)）
• 避免阴影截断：若担心阴影超出父容器，可给父Box添加对应方向内边距，比如Modifier.wrapContentSize().padding(bottom = 10.dp)

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