Zarządzanie stanem listy

Ikona oceny 3 gwiazdek

Przewijane listy w Jetpack Compose, takie jak LazyColumn i LazyRow, mogą efektywnie wyświetlać duże ilości danych. Jednak zmiany konfiguracji, takie jak obracanie urządzenia lub składanie/rozkładanie urządzenia składanego, mogą zresetować stan listy, zmuszając użytkowników do ponownego przewijania do poprzedniej pozycji.

Sprawdzone metody

Listy przewijane powinny zachowywać swój stan, a zwłaszcza pozycję przewijania, oraz stan poszczególnych elementów listy (np. pól tekstowych) podczas wszystkich zmian konfiguracji, aby zapewnić użytkownikom płynne działanie.

Składniki

  • rememberLazyListState(): tworzy i zapamiętuje LazyListState, który służy do kontrolowania i obserwowania pozycji przewijania listy. Jest automatycznie zachowywany podczas zmian konfiguracji.
  • rememberSaveable: zapamiętuje wartość stanu podczas zmian konfiguracji, co jest przydatne do zachowywania stanów poszczególnych elementów listy (np. danych wejściowych w polu tekstowym).

Kroki

W Jetpack Compose zachowanie pozycji przewijania listy jest obsługiwane automatycznie, gdy używasz stanu przewijania. Aby zachować stan poszczególnych złożonych elementów listy (takich jak dane wejściowe TextField), użyj rememberSaveable.

1. Zachowywanie stanu przewijania listy

Aby zapisać i przywrócić pozycję przewijania listy po zmianach konfiguracji, utwórz LazyListState za pomocą rememberLazyListState() i przekaż go jako parametr state listy przewijanej, np. LazyColumn.

Compose automatycznie zachowuje pozycję przewijania.

2. Zachowaj stan poszczególnych elementów listy

Jeśli lista zawiera elementy stanowe (np. elementy z polami tekstowymi), stan tych poszczególnych elementów może zostać utracony, gdy zostaną przewinięte poza ekran i poddane recyklingowi lub podczas zmian konfiguracji.

Aby zachować stan poszczególnych elementów, użyj rememberSaveable w zakresie elementu listy. Dzięki temu po ponownym utworzeniu elementu lub przewinięciu go z powrotem do widoku jego stan zostanie przywrócony.

Oto kompletna, możliwa do skompilowania implementacja, która pokazuje przywracanie zarówno stanu przewijania, jak i stanu elementu:

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

Wyniki

Lista z możliwością przewijania może teraz przywrócić pozycję przewijania i stan każdego elementu na liście.

Dodatkowe materiały