如何为 Android Jetpack Compose Column 或 Row 添加渐隐边缘效果? [英] How to add fading edge effect to Android Jetpack Compose Column or Row?

问题描述

我需要实现具有顶部渐隐边缘效果的 LazyColumn.在 Android 上，我使用

我尝试修改画布:

@Composable有趣的屏幕(){盒子(修饰符.fillMaxWidth().background(颜色= Color.Yellow)){懒列(修饰符 = 修饰符.fillMaxSize().drawWithContent {val 颜色 = listOf(Color.Transparent, Color.Black)绘制内容()绘制矩形(画笔 = Brush.verticalGradient(colors),blendMode = BlendMode.DstIn)}){itemsIndexed((1..1000).toList()) { item, index ->文本(text = "Item $item: $index value",修饰符 = Modifier.padding(12.dp),颜色 = Color.Red，字体大小 = 24.sp)}}}}

但有错误的结果:

解决方案

只需朝正确的方向稍稍推动即可.这段代码的作用是在 LazyColumn 的顶部放置一个可组合的 Box，并带有一个用于淡入淡出的 alpha 修饰符.您可以再次在一个列中制作多个这些 Box 可组合项，以创建更平滑的效果.

@Composable有趣的 FadingExample() {盒子(修饰符.fillMaxWidth().requiredHeight(500.dp)) {LazyColumn(Modifier.fillMaxSize()) {}盒子(修饰符.fillMaxWidth().高度(10.dp).alpha(0.5f).background(颜色.透明).align(Alignment.TopCenter)){}}}

I need to implement LazyColumn with top fading edge effect. On Android I use fade gradient for ListView or RecyclerView, but couldn't find any solution for Jetpack Compose!

I tried to modify canvas:

@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
                )
            }
        }
    }
}

But have wrong result:

解决方案

Just a little nudge in the right direction. What this piece of code does is place a Box composable at the top of your LazyColumn with an alpha modifier for fading. You can make multiple of these Box composables in a Column again to create a smoother effect.

@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)
        ) {

        }
    }
}

这篇关于如何为 Android Jetpack Compose Column 或 Row 添加渐隐边缘效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！