Gerenciamento de estado da lista

Ícone de classificação de três estrelas

As listas roláveis no Jetpack Compose, como LazyColumn e LazyRow, podem mostrar grandes quantidades de dados com eficiência. No entanto, mudanças de configuração, como a rotação do dispositivo ou dobrar/desdobrar um dispositivo dobrável, podem redefinir o estado de uma lista, forçando os usuários a rolar novamente para a posição anterior.

Práticas recomendadas

As listas roláveis precisam manter o estado, principalmente a posição de rolagem, e o estado dos elementos individuais da lista (como entradas de texto) durante todas as mudanças de configuração para oferecer uma experiência do usuário perfeita.

Ingredientes

  • rememberLazyListState(): cria e memoriza um LazyListState usado para controlar e observar a posição de rolagem da lista. Ele é mantido automaticamente em todas as mudanças de configuração.
  • rememberSaveable: memoriza o valor do estado em todas as mudanças de configuração, útil para preservar estados de elementos individuais da lista (como entradas de campo de texto).

Etapas

No Jetpack Compose, a preservação da posição de rolagem de uma lista é processada automaticamente quando você usa um estado de rolagem. Para preservar o estado de elementos individuais e complexos da lista (como entradas TextField), use rememberSaveable.

1. Preservar o estado de rolagem da lista

Para salvar e restaurar a posição de rolagem da lista em todas as mudanças de configuração, crie um LazyListState usando rememberLazyListState() e transmita o como o parâmetro state da lista rolável, como um LazyColumn.

O Compose mantém automaticamente a posição de rolagem para você.

2. Preservar o estado de elementos individuais da lista

Se a lista contiver elementos com estado (por exemplo, itens com campos de texto), o estado desses elementos individuais poderá ser perdido quando eles forem rolados para fora da tela e reciclados ou durante mudanças de configuração.

Para preservar o estado de elementos individuais, use rememberSaveable no escopo do item da lista. Isso garante que, quando o item for recomposto ou rolado de volta para a visualização, o estado dele será restaurado.

Confira uma implementação completa e compilável que demonstra a restauração do estado de rolagem e do item:

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

Resultados

A lista rolável agora pode restaurar a posição de rolagem e o estado de cada elemento na lista.

Outros recursos