LazyColumn/LazyRow 中的阴影剪切

Question

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

尝试 1：Modifier.shadow()

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)
                                // 🔴 Look here
                                .shadow(elevation)
                                .onFocusChanged { state ->
                                    isFocused = state.isFocused
                                }
                                .focusable(),
                        ) {
                           // Content here
                        }
                    }
                }
            }
        }
    }
}

尝试 2：Modifier.drawBehind {}

我在 Android 代码中提到了这些行，该代码将海拔高度限制为30.dp 。

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 shadowColor = if (isFocused) Color.Black else Color.Transparent
                        Surface(
                            shape = RoundedCornerShape(8.dp),
                            color = it.copy(alpha = alpha),
                            modifier = Modifier
                                .width(240.dp)
                                .height(150.dp)
                                .padding(start = 16.dp)
                                // 🔴 Look here
                                .coloredShadow(shadowColor)
                                .onFocusChanged { state ->
                                    isFocused = state.isFocused
                                }
                                .focusable(),
                        ) {
                            // Content here
                        }
                    }
                }
            }
        }
    }
}


fun Modifier.coloredShadow(color: Color) = drawBehind {
    val shadowColor = color.toArgb()
    val transparentColor = color.copy(alpha = 0f).toArgb()
    val offsetX = 0.dp
    val offsetY = 8.dp
    val cornerRadius = 4.dp
    drawIntoCanvas {
        val paint = Paint()
        val frameworkPaint = paint.asFrameworkPaint()
        frameworkPaint.color = transparentColor
        frameworkPaint.setShadowLayer(
            // 🔴 Set to 400.dp as radius
            400.dp.toPx(), 
            offsetX.toPx(),
            offsetY.toPx(),
            shadowColor
        )
        it.drawRoundRect(
            0f,
            0f,
            this.size.width,
            this.size.height,
            cornerRadius.toPx(),
            cornerRadius.toPx(),
            paint
        )
    }
}

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

Answer 1

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

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