如何为Jetpack Compose的Box Composable添加阴影实现Elevation效果？

在Jetpack Compose中实现Box的阴影效果，有两种常用的实用方案，具体如下：

方案一：使用Modifier.shadow()直接添加阴影 #

这是最直接的实现方式，通过shadow修饰符可以快速给Box添加自定义阴影。需要注意的是，shadow修饰符必须放在background修饰符之前，否则阴影会被背景颜色覆盖：

Box(
    modifier = Modifier
        .sizeIn(100.dp)
        .shadow(
            elevation = 8.dp, // 阴影高度，数值越大阴影范围越广、颜色越深
            shape = RectangleShape, // 阴影形状，默认矩形，也可传入RoundedCornerShape等自定义形状
            ambientColor = Color.Gray, // 环境光对应的阴影颜色
            spotColor = Color.DarkGray // 点光源对应的阴影颜色
        )
        .background(Color.Magenta)
) {
    Text("Lorem Ipsum")
}

如果不需要自定义阴影颜色，仅保留核心的阴影高度即可，代码可以简化为：

Box(
    modifier = Modifier
        .sizeIn(100.dp)
        .shadow(8.dp)
        .background(Color.Magenta)
) {
    Text("Lorem Ipsum")
}

方案二：使用Surface组件包裹Box #

如果你的界面遵循Material Design设计规范，Surface组件是更贴合规范的选择——它内置了elevation支持，会自动处理阴影与背景色的适配逻辑：

Surface(
    modifier = Modifier.sizeIn(100.dp),
    elevation = 8.dp,
    color = Color.Magenta
) {
    Box {
        Text("Lorem Ipsum")
    }
}

Surface会根据设置的elevation值自动生成符合Material Design标准的阴影，同时color参数直接控制背景色，无需额外添加background修饰符。

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