LazyVerticalGrid в раскрывающемся списке с помощью Jetpack Compose

Я пытаюсь создать раскрывающийся список с множественным выбором в Android Jetpack. Это пользовательский интерфейс, который необходимо создать, а также фрагмент кода.

Column(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
        .fillMaxHeight()
        .fillMaxWidth(),
    verticalArrangement = Arrangement.spacedBy(10.dp),
) {
    Surface(
        color = Color.White,
    ) {
        LazyVerticalGrid(
            state = rememberLazyGridState(),
            modifier = Modifier.fillMaxSize(),
            columns = GridCells.Fixed(2),
        ) {
            itemsIndexed(items = list) { index, item ->
                ListItemView_New(text = item, model = list[index], position = index)
            }
        }
    }
}

@Composable
fun ListItemView_New(
    model: String,
    position: Int,
    text: String,
) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
            .padding(vertical = 6.dp, horizontal = 16.dp),
    ) {
        Checkbox(
            checked = false,
            onCheckedChange = {

            },
            colors = CheckboxDefaults.colors(
                checkedColor = Color.Black,
                uncheckedColor = Color.Gray,
            ),
            modifier = Modifier
                .align(Alignment.CenterStart),
        )

        Text(
            text = text,
            fontSize = 18.sp,
            color = Color.Gray,
            fontWeight = FontWeight.Normal,
            modifier = Modifier
                .align(Alignment.CenterStart)
                .padding(start = 48.dp),
        )
    }
}

выдает следующую ошибку

Вертикально прокручиваемый компонент был измерен с ограничением максимальной высоты, равным бесконечности, что запрещено. Одной из распространенных причин является вложенность макетов, таких как LazyColumn и Column(Modifier.verticalScroll()). Если вы хотите добавить заголовок перед списком элементов, добавьте заголовок как отдельный элемент() перед основным элементом() внутри области LazyColumn. Это могло произойти по другим причинам: ваш ComposeView был добавлен в LinearLayout с некоторым весом, вы применили Modifier.wrapContentSize(unbounded = true) или написали собственный макет. Пожалуйста, попробуйте удалить источник бесконечных ограничений в иерархии над контейнером прокрутки.

Я думаю, это дает ошибку, как есть: .verticalScroll(rememberScrollState()) and LazyVerticalGrid в том же составе.

но я не могу найти обходной путь. Может кто-нибудь помочь здесь.

Какова цель Column? У него есть только один дочерний компонент — Surface; внутри этого есть LazyVerticalGrid. Я предлагаю удалить Column, потому что он вам не нужен в текущей форме кода; LazyVerticalGrid по умолчанию прокручивается.

Yamin 23.05.2024 15:04

Я добавляю компоненты динамически, этот раскрывающийся список является одним из компонентов в столбце. следовательно, требуется вертикальная прокрутка и столбец. @Ямин

Akash Nair 23.05.2024 15:32
1
2
73
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Делая Column прокручиваемым, вы позволяете его дочерним элементам занимать столько места, сколько они хотят, больше, чем доступно в настоящее время. Это нормально, потому что вы можете прокрутить вниз, чтобы увидеть остальное.

Однако вы не можете поместить ленивый компонент, такой как LazyVerticalGrid, в такой бесконечно большой контейнер. LazyVerticalGrid отображает только те элементы, которые видны в данный момент. То, что видно, определяется размером LazyVerticalGrid. Он занимает все доступное пространство, но при размещении в бесконечно большом контейнере (в виде прокручиваемого столбца) фиксированный размер не будет. Вот почему вы получаете ошибку.

Решение простое: либо сделайте контейнер ограниченным по размеру, удалив его модификатор прокрутки, либо явно установите высоту LazyVerticalGrid на некоторое конечное значение.

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