如何为Jetpack Compose的Card组件仅添加底部及左右少量阴影？

要实现仅底部带阴影、左右略带、顶部无阴影的Card组件，不要使用Card自带的elevation（它会生成对称的四周阴影），可以用以下两种实用方式实现：

方式一：自定义阴影修饰符 #

给Card添加自定义shadow修饰符，通过偏移量精准控制阴影位置：

Card(
    elevation = 0.dp, // 关闭Card自带的对称阴影
    shape = RoundedCornerShape(4.dp),
    modifier = Modifier
        .height(50.dp)
        .width(100.dp)
        .shadow(
            elevation = 10.dp,
            shape = RoundedCornerShape(4.dp),
            offset = Offset(x = 0f, y = 6.dp.toPx()), // 阴影向下偏移，消除顶部阴影
            ambientColor = Color.Black.copy(alpha = 0.1f),
            spotColor = Color.Black.copy(alpha = 0.1f)
        ),
    backgroundColor = seatfrogWhite
) {
    // 填充Card内容
}

方式二：graphicsLayer精细控制 #

如果需要更灵活的阴影调整，用graphicsLayer手动配置阴影参数：

Card(
    elevation = 0.dp,
    shape = RoundedCornerShape(4.dp),
    modifier = Modifier
        .height(50.dp)
        .width(100.dp)
        .graphicsLayer {
            shape = RoundedCornerShape(4.dp)
            clip = true
            shadowElevation = 10.dp.toPx()
            shadowColor = Color.Black.copy(alpha = 0.1f).toArgb()
            translationY = 2.dp.toPx() // 轻微下移Card，彻底隐藏顶部阴影
        },
    backgroundColor = seatfrogWhite
) {
    // 填充Card内容
}

关键注意点 #

• 必须将Card的elevation设为0.dp，否则自带的对称阴影会覆盖自定义效果
• 通过offset（shadow修饰符）或translationY（graphicsLayer）让阴影向下偏移，避免顶部出现阴影
• 调整阴影的alpha值和shadowElevation，可以控制阴影的深浅和扩散范围

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