在 jetpack compose 中仅将阴影应用于 Box 的一侧

GenericShape您可以通过多种方式来实现。两种方法是通过在剪辑修改器中创建和使用它或使用drawWithContent来在底部方向上获得更大的剪辑形状clipRect。

由于 clipRect 很简单，我只会发布这一个。结果是

如何裁剪绘制的内容也决定了阴影的绘制方式。阴影只不过是用笔触绘制的形状。您可以参考此答案了解有关阴影修改器的更多详细信息。

@Preview
@Composable
fun SidedShadow() {
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp)
    ) {

        val elevation = 4.dp
        Box(
            modifier = Modifier
                .padding(vertical = 8.dp)
                .size(200.dp, 100.dp)

                .drawWithContent {
                    clipRect(
                        left = 0f,
                        top = 0f,
                        right = size.width,
                        bottom = size.height + elevation.toPx()
                    ){
                        [email protected]()
                    }
                }
                .shadow(
                    elevation = elevation,
                    shape = RoundedCornerShape(
                        topStart = 0.dp,
                        topEnd = 0.dp,
                        bottomStart = 16.dp,
                        bottomEnd = 16.dp,
                    ),
                )
                .background(Color.White)
        )
    }

}

三面阴影

更改左侧和右侧以包含阴影，如下所示。在 jetpack Compose 中，您可以从 Composable 中绘制任何内容，但使用任何剪辑技术都可以限制您定义的溢出边界。

.drawWithContent {
    clipRect(
        left = -elevation.toPx(),
        top = 0f,
        right = size.width + elevation.toPx(),
        bottom = size.height + elevation.toPx()
    ) {
        [email protected]()
    }
}