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 lub złożenie/rozłożenie urządzenia składanego, mogą jednak zresetować stan listy, co zmusi użytkowników do ponownego przewinięcia 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 po zmianach konfiguracji.
  • rememberSaveable: zapamiętuje wartość stanu w przypadku 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 zachowywanie pozycji przewijania listy jest obsługiwane automatycznie, gdy używasz stanu przewijania. Aby zachować stan poszczególnych, złożonych elementów listy (np. TextField danych wejściowych), 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 z możliwością przewijania, np. LazyColumn.

Funkcja pisania automatycznie zachowuje pozycję przewijania.

2. Zachowywanie stanu poszczególnych elementów listy

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

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

Oto pełna implementacja, którą można skompilować i która pokazuje 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