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？