Как добавить эффект затухания в столбец или строку Android Jetpack Compose?

Мне нужно реализовать LazyColumn с эффектом затухания верхнего края. На Android я использую градиент затухания для ListView или RecyclerView, но не могу найти никакого решения для Jetpack Compose!

введите описание изображения здесь

Я попытался изменить холст:

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

Но получился неправильный результат:

введите описание изображения здесь


android kotlin android-jetpack-compose android-jetpack
person Andrey    schedule 23.03.2021    source источник
comment
кисть = Brush.verticalGradient (цвета, endY = 500f)   -  person user3872620    schedule 23.03.2021

Ответы (2)


arrow_upward
2
arrow_downward

Просто небольшой толчок в правильном направлении. Этот фрагмент кода помещает составной элемент Box в верхнюю часть вашего LazyColumn с альфа-модификатором для затухания. Вы можете снова сделать несколько таких компонентов Box в столбце, чтобы создать более плавный эффект.

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

        }
    }
}
person user3872620    schedule 23.03.2021

arrow_upward
1
arrow_downward

Что вы можете сделать, так это поместить Spacer вверху списка и нарисовать градиент на этом поле. Сделайте поле маленьким, чтобы только небольшая часть списка имела наложение. Сделайте цвет таким же, как фон экрана, и это будет выглядеть так, как будто содержимое тускнеет.

val screenBackgroundColor = MaterialTheme.colors.background

    Box(Modifier.fillMaxSize()) {

        LazyColumn(Modifier.fillMaxSize()) {
            //your items
        }

        //Gradient overlay
        Spacer(
            Modifier
                .fillMaxWidth()
                .height(32.dp)
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color.Transparent,
                            screenBackgroundColor
                        )
                    )
                )
                //.align(Alignment) to control the position of the overlay
        )
    }

Вот как бы это выглядело:

скриншот

Однако это не совсем то, что вы просили, поскольку кажется, что вы хотите, чтобы фактическое содержимое списка исчезло. Я не знаю, как применить alpha только к части представления. Возможно, попробуйте покопаться в .alpha источниках, чтобы разобраться.

person Mauro Banze    schedule 03.04.2021