Gestione dello stato dell'elenco

Icona di valutazione a tre stelle

Gli elenchi scorrevoli in Jetpack Compose, come LazyColumn e LazyRow, possono visualizzare in modo efficiente grandi quantità di dati. Tuttavia, le modifiche alla configurazione, come la rotazione del dispositivo o l'apertura/chiusura di un dispositivo pieghevole, possono reimpostare lo stato di un elenco, costringendo gli utenti a scorrere di nuovo fino alla posizione precedente.

Best practice

Gli elenchi scorrevoli devono mantenere il loro stato, in particolare la posizione di scorrimento, e lo stato dei singoli elementi dell'elenco (come gli input di testo) durante tutte le modifiche alla configurazione per offrire un'esperienza utente fluida.

Ingredienti

  • rememberLazyListState(): crea e memorizza un LazyListState utilizzato per controllare e osservare la posizione di scorrimento dell'elenco. Viene mantenuto automaticamente durante le modifiche alla configurazione.
  • rememberSaveable: memorizza il valore dello stato durante le modifiche alla configurazione, utile per mantenere gli stati dei singoli elementi dell'elenco (ad esempio gli input dei campi di testo).

Passaggi

In Jetpack Compose, il mantenimento della posizione di scorrimento di un elenco viene gestito automaticamente quando utilizzi uno stato di scorrimento. Per mantenere lo stato dei singoli elementi complessi dell'elenco (ad esempio gli input di TextField), utilizza rememberSaveable.

1. Mantenere lo stato di scorrimento dell'elenco

Per salvare e ripristinare la posizione di scorrimento dell'elenco durante le modifiche alla configurazione, crea un LazyListState utilizzando rememberLazyListState() e passalo come parametro state dell'elenco scorrevole, ad esempio un LazyColumn.

Compose mantiene automaticamente la posizione di scorrimento.

2. Mantenere lo stato dei singoli elementi dell'elenco

Se l'elenco contiene elementi stateful (ad esempio elementi con campi di testo), lo stato di questi singoli elementi può essere perso quando vengono spostati fuori schermo e riciclati o durante le modifiche alla configurazione.

Per mantenere lo stato dei singoli elementi, utilizza rememberSaveable all'interno dell'ambito dell'elemento dell'elenco. In questo modo, quando l'elemento viene ricomposto o riportato nella visualizzazione, il suo stato viene ripristinato.

Di seguito è riportata un'implementazione completa e compilabile che mostra il ripristino dello stato di scorrimento e dello stato dell'elemento:

// 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") }
        )
    }
}

Risultati

L'elenco scorrevole è ora in grado di ripristinare la posizione di scorrimento e lo stato di ogni elemento dell'elenco.

Risorse aggiuntive