如何为Android Jetpack组合列或行添加渐变边缘效果？

Question

我需要实现带有顶部褪色边缘效果的LazyColumn。在Android上，我对ListView或RecyclerView使用渐变，但没有找到任何Jetpack合成的解决方案！

我试着修改画布：

@Composable
fun Screen() {
    Box(
        Modifier
            .fillMaxWidth()
            .background(color = Color.Yellow)
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .drawWithContent {
                    val colors = listOf(Color.Transparent, Color.Black)
                    drawContent()
                    drawRect(
                        brush = Brush.verticalGradient(colors),
                        blendMode = BlendMode.DstIn
                    )
                }
        ) {
            itemsIndexed((1..1000).toList()) { item, index ->
                Text(
                    text = "Item $item: $index value",
                    modifier = Modifier.padding(12.dp),
                    color = Color.Red,
                    fontSize = 24.sp
                )
            }
        }
    }
}

却有错误的结果：

Answer 1

只是朝正确的方向轻轻推了一下。这段代码所做的是在LazyColumn的顶部放置一个可组合的框，并使用alpha修饰符进行褪色。您可以在一个列中再次创建多个这些框组合，以创建更平滑的效果。

@Composable
fun FadingExample() {
    Box(
        Modifier
            .fillMaxWidth()
            .requiredHeight(500.dp)) {

        LazyColumn(Modifier.fillMaxSize()) {

        }

        Box(
            Modifier
                .fillMaxWidth()
                .height(10.dp)
                .alpha(0.5f)
                .background(Color.Transparent)
                .align(Alignment.TopCenter)
        ) {

        }
    }
}