Zustandsverwaltung für Listen

Symbol für Bewertung mit drei Sternen

Scrollbare Listen in Jetpack Compose, z. B. LazyColumn und LazyRow, können große Datenmengen effizient darstellen. Konfigurationsänderungen wie das Drehen des Geräts oder das Auf- oder Zuklappen eines faltbaren Geräts können jedoch den Status einer Liste zurücksetzen, sodass Nutzer wieder zu ihrer vorherigen Position scrollen müssen.

Best Practices

Scrollbare Listen sollten ihren Status, insbesondere die Scrollposition, und den Status ihrer einzelnen Listenelemente (z. B. Texteingaben) bei allen Konfigurationsänderungen beibehalten, um eine nahtlose Nutzererfahrung zu ermöglichen.

Zutaten

  • rememberLazyListState(): Erstellt und speichert einen LazyListState, mit dem die Scrollposition der Liste gesteuert und beobachtet wird. Er bleibt bei Konfigurationsänderungen automatisch erhalten.
  • rememberSaveable: Speichert den Zustandswert über Konfigurationsänderungen hinweg. Das ist nützlich, um den Zustand einzelner Listenelemente (z. B. Textfeldeingaben) beizubehalten.

Schritte

In Jetpack Compose wird die Scrollposition einer Liste automatisch beibehalten, wenn Sie einen Scrollstatus verwenden. Wenn Sie den Status einzelner, komplexer Listenelemente (z. B. TextField-Eingaben) beibehalten möchten, verwenden Sie rememberSaveable.

1. Scrollstatus der Liste beibehalten

Wenn Sie die Scrollposition Ihrer Liste bei Konfigurationsänderungen speichern und wiederherstellen möchten, erstellen Sie mit rememberLazyListState() einen LazyListState und übergeben Sie ihn als state-Parameter Ihrer scrollbaren Liste, z. B. einer LazyColumn.

Compose speichert die Scrollposition automatisch für Sie.

2. Status einzelner Listenelemente beibehalten

Wenn Ihre Liste zustandsorientierte Elemente enthält (z. B. Elemente mit Textfeldern), kann der Status dieser einzelnen Elemente verloren gehen, wenn sie aus dem Bildschirm gescrollt und recycelt werden oder wenn Konfigurationsänderungen vorgenommen werden.

Wenn Sie den Status einzelner Elemente beibehalten möchten, verwenden Sie rememberSaveable im Bereich des Listenelements. So wird sichergestellt, dass der Status des Elements wiederhergestellt wird, wenn es neu zusammengesetzt oder wieder in die Ansicht gescrollt wird.

Hier ist eine vollständige, kompilierbare Implementierung, die sowohl die Wiederherstellung des Scrollstatus als auch des Elementstatus zeigt:

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

Ergebnisse

Die scrollbare Liste kann jetzt die Scrollposition und den Status jedes Elements in der Liste wiederherstellen.

Zusätzliche Ressourcen