Zarządzanie stanem listy

Ikona oceny 3 gwiazdek

Listy z możliwością przewijania w Jetpack Compose, takie jak LazyColumn i LazyRow, mogą efektywnie wyświetlać duże ilości danych. Zmiany konfiguracji, takie jak obrócenie urządzenia czy złożenie lub rozłożenie urządzenia składanego, mogą jednak zresetować stan listy, co zmusza użytkowników do ponownego przewijania do poprzedniej pozycji.

Sprawdzone metody

Listy z możliwością przewijania powinny zachowywać swój stan, w szczególności pozycję przewijania, oraz stan poszczególnych elementów listy (np. pól tekstowych) podczas wszystkich zmian konfiguracji, aby zapewnić użytkownikom bezproblemową obsługę.

Składniki

  • rememberLazyListState(): tworzy i zapamiętuje LazyListState , który służy do kontrolowania i obserwowania pozycji przewijania listy. Jest on automatycznie zachowywany podczas zmian konfiguracji.
  • rememberSaveable: zapamiętuje wartość stanu podczas zmian konfiguracji, co jest przydatne do zachowania stanu poszczególnych elementów listy (np. danych wprowadzonych 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 (np. danych wprowadzonych w TextField), użyj rememberSaveable.

1. Zachowaj stan przewijania listy

Aby zapisać i przywrócić pozycję przewijania listy podczas zmian konfiguracji utwórz LazyListState za pomocą rememberLazyListState() i przekaż go jako parametr state listy z możliwością przewijania, 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 elementów może zostać utracony, gdy zostaną one 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, gdy element zostanie ponownie skomponowany lub przewinięty z powrotem do widoku, jego stan zostanie przywrócony.

Oto pełna implementacja, którą można skompilować, pokazująca przywracanie stanu przewijania 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 przywracać pozycję przewijania i stan każdego elementu na liście.

Dodatkowe materiały