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 in caso di modifiche alla configurazione.
  • rememberSaveable: memorizza il valore dello stato tra le modifiche alla configurazione, utile per conservare 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 conservare lo stato di singoli elementi di elenchi complessi (ad esempio input TextField), utilizza rememberSaveable.

1. Conservare lo stato di scorrimento dell'elenco

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

Compose salva automaticamente la posizione di scorrimento.

2. Conservare lo stato del singolo elemento dell'elenco

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

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

Di seguito è riportata 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

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

Risorse aggiuntive