列表状态管理

三星评级图标

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

结果

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

其他资源