LazyColumn/LazyRow 中的阴影裁剪答案

【问题标题】：Shadow clipping in LazyColumn/LazyRowLazyColumn/LazyRow 中的阴影裁剪
【发布时间】：2022-10-07 02:15:59
【问题描述】：

当阴影与LazyRow 中的其他项目重叠时，阴影以一种非常奇怪的方式被剪裁，我不知道为什么。我在电视模拟器上运行这段代码，但我无法想象这会有什么不同。

val colors = listOf(
    Color.Red,
    Color.Blue,
    Color.Green,
    Color.Yellow
)

@Composable
fun ListTest() {
    LazyColumn {
        items(30) {
            Column {
                Text(\"This is row $it\")
                LazyRow {
                    items(colors) {
                        var isFocused by remember { mutableStateOf(false) }
                        val alpha = if (isFocused) 1f else 0.25f
                        val elevation = if (isFocused) 40.dp else 0.dp
                        Surface(
                            shape = RoundedCornerShape(8.dp),
                            color = it.copy(alpha = alpha),
                            modifier = Modifier
                                .width(240.dp)
                                .height(150.dp)
                                .padding(start = 16.dp)
                                .shadow(elevation)
                                .onFocusChanged { state ->
                                    isFocused = state.isFocused
                                }
                                .focusable(),
                        ) {
                           // Content here
                        }
                    }
                }
            }
        }
    }
}

我怎样才能摆脱这个剪裁问题？

标签： android android-jetpack-compose

【解决方案1】：

我不认为这是一个剪辑问题。您只是将高程设置得太高，因此曲面的阴影必须跨越另一行/列，并显示在另一个曲面的顶部，但由于它们不是同一视图的子视图，因此无法正确处理阴影模糊。

也许您应该尝试将高度设置为 30dp 或 24dp？

【讨论】：