Прозрачный липкий заголовок показывает элементы позади

Я ищу способ сделать мой липкий заголовок прозрачным фоном, потому что мой фон имеет градиент, и мне нужно, чтобы заголовок имел прозрачный фон.

Воспроизводимый пример

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun Example() {
    Box(
        Modifier.fillMaxSize()
            .drawBackgroundGradient()
            .clipToBounds()
    ) {
        LazyColumn {
            stickyHeader {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Transparent)
                        .padding(top = 16.dp, bottom = 16.dp)
                ) {
                    Card(
                        modifier = Modifier.fillMaxWidth(),
                        border = BorderStroke(1.dp, Color.Gray),
                        shape = RoundedCornerShape(20.dp),
                        colors = CardDefaults.cardColors(containerColor = TransparentBackground)
                    ) {
                        Row(
                            modifier = Modifier.padding(12.dp),
                            verticalAlignment = Alignment.CenterVertically
                        ) {

                            Icon(
                                modifier = Modifier.padding(end = 16.dp),
                                painter = rememberVectorPainter(Icons.Filled.Warning),
                                contentDescription = "Disclaimer icon",
                                tint = Color.Yellow
                            )

                            Text(
                                text = "Test copy text of banner",
                                style = TS_Helvetica_400.copy(
                                    lineHeight = 15.sp
                                ),
                                fontSize = 14.sp,
                                color = Color.White
                            )
                        }

                    }

                }
            }
            items(fakeList) { item ->
                Text(modifier = Modifier.fillMaxWidth(), text = item, color = Color.White)
            }
        }
    }
}

val baseList = listOf("name 1", "name 2", "name 3")

// Create a list of 100 elements by repeating baseList
val fakeList = List(100 / baseList.size) { baseList }.flatten() + baseList.take(100 % baseList.size)

fun Modifier.drawBackgroundGradient(): Modifier {
    return this.drawBehind {
        val gradientColors =
            listOf(Color(0xFF6A66FF).copy(alpha = 0.2f), Color.Transparent)

        // Draw the background color
        drawRect(color = Color.Black)

        // Draw the first radial gradient circle
        drawCircle(
            brush = Brush.radialGradient(
                colors = gradientColors,
                center = Offset(size.width * 0.1f, size.height * 0.5f),
                radius = 800.dp.toPx()
            ),
            radius = 800.dp.toPx(),
            center = Offset(size.width * 0.1f, size.height * 0.5f)
        )

        // Draw the second radial gradient circle
        drawCircle(
            brush = Brush.radialGradient(
                colors = gradientColors,
                center = Offset(size.width * 0.9f, size.height * 0.9f),
                radius = 500.dp.toPx()
            ),
            radius = 500.dp.toPx(),
            center = Offset(size.width * 0.9f, size.height * 0.9f)
        )
    }
}

Я пробовал некоторые обходные пути, но они не включают компонент StickyHeader. Я знаю, что это экспериментальный вариант, но есть ли способ, чтобы элементы не отображались позади при перетаскивании, а вместо этого обрезались на каком-то коробочном содержимом?

Пожалуйста, предоставьте минимально воспроизводимый пример, который мы можем выполнить самостоятельно.

Leviathan 01.07.2024 15:36

Пример предоставлен @Leviathan

Gastón Saillén 01.07.2024 15:56

Что такое TransparentBackground? В частности, каково его альфа-значение?

Leviathan 01.07.2024 16:27

Color.Transparent.copy(alpha = 0.7f) Вы также можете использовать Color.Transparent, то же самое

Gastón Saillén 01.07.2024 17:00
0
4
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Насколько мне известно, LazyColumn всегда будет прокручивать элементы за stickyHeader. Вы можете добиться желаемого пользовательского интерфейса, отделив заголовок и обернув его Column вместе с LazyColumn.

Вот обновленный код:

@Composable
fun Example() {
Column(
    Modifier
        .fillMaxSize()
        .drawBackgroundGradient()
        .clipToBounds()
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Transparent)
            .padding(top = 16.dp, bottom = 16.dp)
    ) {
        Card(
            modifier = Modifier.fillMaxWidth(),
            border = BorderStroke(1.dp, Color.Gray),
            shape = RoundedCornerShape(20.dp),
            colors = CardDefaults.cardColors(containerColor = Color.Transparent)
        ) {
            Row(
                modifier = Modifier.padding(12.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {

                Icon(
                    modifier = Modifier.padding(end = 16.dp),
                    painter = rememberVectorPainter(Icons.Filled.Warning),
                    contentDescription = "Disclaimer icon",
                    tint = Color.Yellow
                )

                Text(
                    text = "Test copy text of banner",
                    fontSize = 14.sp,
                    color = Color.White
                )
            }

        }

    }
    LazyColumn(modifier = Modifier.weight(1f)) {
        items(fakeList) { item ->
            Text(modifier = Modifier.fillMaxWidth(), text = item, color = Color.White)
        }
    }
  }
}

Большое спасибо за ваш ответ ! Сначала я использовал тот же самый подход в качестве обходного пути, но я пытался посмотреть, есть ли способ заставить StickyHeader работать.

Gastón Saillén 01.07.2024 19:47

Рад, что смог помочь!

Adnan Habib 01.07.2024 23:04

Другие вопросы по теме