Gestione dello stato dell'elenco

Icona di valutazione a tre stelle

Gli elenchi scorrevoli in Jetpack Compose, come LazyColumn e LazyRow, possono visualizzare grandi quantità di dati in modo efficiente. 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 che viene utilizzato per controllare e osservare la posizione di scorrimento dell'elenco. Viene mantenuto automaticamente tra le modifiche alla configurazione.
  • rememberSaveable: memorizza il valore dello stato tra le modifiche alla configurazione, utile per preservare i singoli stati degli elementi dell'elenco (come gli input dei campi di testo).

Passaggi

In Jetpack Compose, la conservazione della posizione di scorrimento di un elenco viene gestita automaticamente quando utilizzi uno stato di scorrimento. Per conservare lo stato di singoli elementi di un elenco complesso (come gli input TextField), utilizza rememberSaveable.

1. Preserva lo stato di scorrimento dell'elenco

Per salvare e ripristinare la posizione di scorrimento dell'elenco tra 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. Preserva lo stato dei singoli elementi dell'elenco

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

Per preservare lo stato dei singoli elementi, utilizza rememberSaveable nell'ambito dell'elemento dell'elenco. In questo modo, quando l'elemento viene ricomposto o scorre di nuovo nella visualizzazione, il suo stato viene ripristinato.

Ecco un'implementazione completa e compilabile che mostra il ripristino dello stato di scorrimento e dello stato degli elementi:

// 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

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

Risorse aggiuntive