Gerenciamento de estado da lista

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

As listas roláveis no Jetpack Compose, como LazyColumn e LazyRow, podem mostrar grandes quantidades de dados de forma eficiente. 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 lembra um LazyListState que é usado para controlar e observar a posição de rolagem da lista. Ele persiste automaticamente nas mudanças de configuração.
  • rememberSaveable: lembra o valor do estado em todas as mudanças de configuração, o que é útil para preservar estados de elementos de lista individuais, 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 de lista individuais e complexos (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 uma 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 tiver 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 um elemento individual, use rememberSaveable dentro do escopo do item da lista. Isso garante que, quando o item for recomposto ou rolado de volta para a visualização, o estado dele seja restaurado.

Confira uma implementação completa e compilável que demonstra a restauração do estado de rolagem e do estado 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