Início / coding / Perguntas / 79177673
Accepted
NullPointerException
Asked: 2024-11-11 20:36:56 +0800 CST

Como aninhar uma rolagem vertical dentro de outra rolagem vertical no Compose?

  • 772

O que posso fazer se eu precisar colocar um lazycolumndentro de um lazycolumn? Estou recebendo este erro:

IllegalStateException: O componente com rolagem vertical foi medido com restrições de altura máxima infinita, o que não é permitido.

Eu sei que, como diz o documento ( https://developer.android.com/develop/ui/compose/lists#avoid-nesting-scrollable ), devemos evitar aninhar componentes roláveis ​​na mesma direção.

Mas meu aplicativo é um aplicativo especial, como um "construtor de aplicativos" no qual o usuário pode construir um aplicativo usando diferentes tipos de itens, por exemplo: textos, imagens, contêineres de rolagem vertical ( lazycolumns), contêineres de rolagem horizontal ( lazyrows), etc. e, por exemplo, o usuário é livre para colocar uma rolagem vertical, com algum texto e uma rolagem horizontal, e essa rolagem horizontal pode ter uma rolagem vertical dentro.

Preciso saber como conseguir isso

1 respostas

  1. Best Answer

    Você pode colocar um LazyColumnem outro LazyColumnou qualquer outro Composable com scrollModifier, mas não pode ter Composable rolável aninhado com Constraints com maxWidth/Height igual a Constraints.Infinityna direção de rolagem porque o Modifier scroll tem uma verificação se Constrains de entrada têm max Constraints.Infinity. Se você alterar esse infinito Constraints.Infinitypara algo finito, pode colocar um rolável dentro de outro.

    Definir heightIn(max)como finito altera maxHeight (esta é a maior altura com a qual um Composable pode ser medido) Composable rolável aninhado pode ser medido entre min-max para que possa ser tão grande quanto seu conteúdo ou você pode definir uma altura fixa para limitar o Composable aninhado para que ele não trave com

    java.lang.IllegalStateException: O componente de rolagem vertical foi medido com restrições de altura máxima infinita, o que não é permitido. Um dos motivos comuns é o aninhamento de layouts como LazyColumn e Column(Modifier.verticalScroll()). Se você quiser adicionar um cabeçalho antes da lista de itens, adicione um cabeçalho como um item() separado antes do item principal() dentro do escopo LazyColumn. Pode haver outros motivos para isso acontecer: seu ComposeView foi adicionado a um LinearLayout com algum peso, você aplicou Modifier.wrapContentSize(unbounded = true) ou escreveu um layout personalizado. Tente remover a fonte de restrições infinitas na hierarquia acima do contêiner de rolagem.

    https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/CheckScrollableContainerConstraints.kt;l=30

    @Preview
@Composable
fun ScrollTest() {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {

        item {
            Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(Color.Red))
        }

        item {
            LazyColumn(
                modifier = Modifier
                    // without this modifier crash happens
                    .heightIn(
            // This number is an arbitrary height for demonstration, you can use screen height or 
           // another number to limit how big this LazyColumn should be
                        max = Short.MAX_VALUE.toInt().dp
                    ),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(20) {
                    Text(
                        text = "Nested Row $it",
                        modifier = Modifier.fillMaxWidth().padding(16.dp)
                    )
                }
            }
        }

        items(20) {
            Text(
                text = "Outer Row $it",
                modifier = Modifier.fillMaxWidth().padding(16.dp)
            )
        }
    }
}

    Editar

    Este número máximo apresenta o quão alto LazyColumnele pode ser. Quanto maior, mais itens serão compostos de uma vez e será menos preguiçoso, mais parecido com Column com scroll.

    LazyColumn(
    modifier = Modifier
        // without this modifier crash happens
        .heightIn(
            max = Short.MAX_VALUE.toInt().dp
        ),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(2000) {

        LaunchedEffect(Unit) {
            println("Recomposing item: $it")
        }
        
        Text(
            text = "Nested Row $it",
            modifier = Modifier.fillMaxWidth().padding(16.dp)
        )
    }
}

    Compõe 582 no meu emulador. E é por isso que há um aviso no link que compartilhei sobre desempenho.

    Essa abordagem é útil quando você não sabe quantos itens uma LazyColumn pode ter e usa um número grande para medir sua altura entre 0 e algum número grande para obter a altura do conteúdo ou coloca uma LazyGrid com um pequeno número de itens em uma LazyColumn em vez de implementá-la você mesmo.

    Quando você deseja colocar uma LazyList em outra, considere o fato de que, dependendo do tamanho da janela de visualização, o número de itens que ela compõe também muda.

    • 3

relate perguntas