Управление состоянием списка

Значок с тремя звездами

Списки с возможностью прокрутки в Jetpack Compose, например LazyColumn и LazyRow, позволяют эффективно отображать большие объемы данных. Однако при изменении конфигурации, например при повороте устройства или складывании/раскладывании складного устройства, состояние списка может сброситься, и пользователю придется снова прокручивать его до нужного места.

Рекомендации

Прокручиваемые списки должны сохранять свое состояние, в частности положение прокрутки и состояние отдельных элементов списка (например, текстовых полей), при любых изменениях конфигурации, чтобы обеспечить удобство для пользователей.

Ингредиенты

  • rememberLazyListState(): создает и запоминает LazyListState, который используется для управления положением прокрутки списка и его отслеживания. Он автоматически сохраняется при изменении конфигурации.
  • rememberSaveable: запоминает значение состояния при изменении конфигурации. Это полезно, например, для сохранения состояния отдельных элементов списка (таких как введенный в текстовое поле текст).

Шаги

В Jetpack Compose сохранение позиции прокрутки списка выполняется автоматически при использовании состояния прокрутки. Чтобы сохранить состояние отдельных сложных элементов списка (например, полей ввода TextField), используйте rememberSaveable.

1. Сохранение состояния прокрутки списка

Чтобы сохранить и восстановить позицию прокрутки списка при изменении конфигурации, создайте LazyListState, используя rememberLazyListState(), и передайте его в качестве параметра state прокручиваемого списка, например LazyColumn.

При создании письма автоматически сохраняется позиция прокрутки.

2. Сохранение состояния отдельных элементов списка

Если в списке есть элементы с сохранением состояния (например, текстовые поля), их состояние может быть потеряно, когда они прокручиваются за пределы экрана и переиспользуются или когда меняется конфигурация.

Чтобы сохранить состояние отдельного элемента, используйте rememberSaveable в области действия элемента списка. Это гарантирует, что при повторном создании или прокрутке элемента в поле зрения его состояние будет восстановлено.

Ниже приведен полный пример реализации, который можно скомпилировать и в котором демонстрируется восстановление состояния прокрутки и состояния элемента:

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

Результаты

Теперь прокручиваемый список может восстанавливать положение прокрутки и состояние каждого элемента в списке.

Дополнительные ресурсы