列表状态管理

三星评级图标

Jetpack Compose 中的可滚动列表（例如 LazyColumn 和 LazyRow）可以高效地显示大量数据。不过，配置更改（例如设备旋转或折叠/展开可折叠设备）可以重置列表的状态，迫使用户重新滚动到之前的位置。

最佳做法

可滚动列表应在所有配置更改期间保持其状态（特别是滚动位置）及其各个列表元素（例如文本输入）的状态，以提供无缝的用户体验。

所需要素

  • rememberLazyListState()：创建并记住用于控制和观察列表滚动位置的 LazyListState。它会在配置发生变化后自动保持不变。
  • rememberSaveable：在配置更改期间记住状态值，有助于保留各个列表元素的状态（例如文本字段输入）。

步骤

在 Jetpack Compose 中，当您使用滚动状态时，系统会自动处理列表的滚动位置保留问题。如需保留各个复杂列表元素（例如 TextField 输入）的状态，请使用 rememberSaveable。

1. 保留列表滚动状态

如需在配置更改期间保存和恢复列表的滚动位置，请使用 rememberLazyListState() 创建 LazyListState，并将其作为可滚动列表（例如 LazyColumn）的 state 参数进行传递。

Compose 会自动为您保留滚动位置。

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

结果

现在，您的可滚动列表能够恢复其滚动位置以及列表中每个元素的状态。

其他资源