Jetpack Compose 嵌套阴影框裁剪问题：终极解决指南

Jetpack Compose 嵌套阴影框裁剪问题的终极指南

问题

在 Jetpack Compose 中，嵌套阴影框有时会出现裁剪问题，内层阴影框可能会被外层阴影框裁剪。这通常发生在内层阴影框具有较大的海拔高度时。

解决之道

解决此问题的关键在于调整阴影框的形状和海拔高度。以下步骤可以帮助你解决此问题：

1. 调整内层阴影框的形状： 将内层阴影框的形状更改为矩形（RectangleShape）或圆形（CircleShape）。这将防止圆角形状造成的裁剪问题。
2. 降低内层阴影框的海拔高度： 降低内层阴影框的海拔高度可以防止它从外层阴影框中突出。将 elevation 属性设置为较小的值，例如 2.dp。
3. 保留外层阴影框的阴影： 确保外层阴影框具有足够的阴影以创建明显的效果。使用 Modifier.shadow 函数设置阴影的属性，例如 elevation、blurRadius 和 offset。

代码示例

Row(
    modifier = Modifier
        .background(brush = color, shape = RoundedCornerShape(5.dp))
        .align(Alignment.CenterHorizontally)
        .shadow(elevation = 4.dp, blurRadius = 4.dp, offset = Offset(2.dp, 2.dp))
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .offset(y = (-15).dp)
                .align(Alignment.CenterHorizontally)
                .padding(horizontal = 10.dp, vertical = 5.dp),
            colors = CardDefaults.cardColors(containerColor = colorRedLive),
            shape = RectangleShape(),
            elevation = 2.dp
        ) {
            Text(
                modifier = Modifier.padding(vertical = 2.dp).fillMaxWidth(),
                text = "Live",
                textAlign = TextAlign.Center,
                style = TextStyle(color = MaterialTheme.colorScheme.onPrimary)
            )
        }
        Text(
            modifier = Modifier.offset(y = (-10).dp).fillMaxWidth(),
            text = "3 - 5",
            textAlign = TextAlign.Center,
            style = TextStyle(fontWeight = FontWeight(600), fontSize = 16.sp, color = MaterialTheme.colorScheme.onPrimary)
        )
    }
}

通过遵循这些步骤，你可以解决内层阴影框被外层阴影框裁剪的问题，并创建具有正确阴影和海拔高度的嵌套阴影框。

常见问题解答

1. 为什么内层阴影框会被外层阴影框裁剪？

   • 这通常是由于内层阴影框具有较大的海拔高度，并且其形状是圆角的。

2. 如何降低内层阴影框的海拔高度？

   • 使用 elevation 属性，将内层阴影框的海拔高度设置为一个较小的值，例如 2.dp。

3. 如何调整内层阴影框的形状？

   • 使用 shape 属性，将内层阴影框的形状更改为矩形（RectangleShape）或圆形（CircleShape）。

4. 如何保留外层阴影框的阴影？

   • 使用 Modifier.shadow 函数，设置外层阴影框的阴影属性，例如 elevation、blurRadius 和 offset。

5. 为什么我的阴影框看起来不一致？

   • 确保外层阴影框具有足够的阴影以创建明显的效果。调整 elevation、blurRadius 和 offset 属性以获得所需的视觉效果。