Jetpack Compose Paging 3 自动滚动到顶部

Question

我用的是第3页，在显示数据的时候，发现如果页面切换回到最底部，数据会自动滚到最上面。

如果有两个项目会自动滚动到顶部，如果有一个项目就没有问题

val pagingItems = viewModel.windList.collectAsLazyPagingItems()

LazyColumn(Modifier.fillMaxSize()) {
    item {
        ...
    }
    items(pagingItems) { wind ->
        if (wind != null) {
            WindRow(navController, wind)
        }
    }
}

这样就可以了

LazyColumn(Modifier.fillMaxSize()) {
    items(pagingItems) { wind ->
        if (wind != null) {
            WindRow(navController, wind)
        }
    }
}

我不可避免地会使用多个项目。我该如何解决？

Answer 1

由于某种原因，您有可选的wind 元素，并且您当前的代码将创建一些零高度单元格，这可能会导致这种行为。如果可能，我建议您将其设为非可选。

同样，根据您的设计，您可能希望显示一个占位符，否则不要像这里这样添加空元素：

items(pagingItems.filterNotNull()) { wind ->
    WindRow(navController, wind)
}

或者，如果您的 null 对象可能变为非 null 并且您需要显示更新，您可以执行以下操作：

pagingItems.forEachIndexed { i, wind ->
    if (wind != null) {
        item(key = i) {
            WindRow(navController, wind)
        }
    }
}

如果这些都没有帮助，请将您的代码更新为minimal reproducible example。

Answer 2

如果我的理解正确，每次新页面加载都会导致您滚动到顶部，并在 LazyColumn 顶部使用静态项目。

如果没有在示例中实际尝试，我对这里发生的事情的最佳猜测是，在每次新页面加载时，paging-compose 会将列表重新提交给LazyColumn。由于始终存在一个静态项，因此 Compose 会将该项保持在视图中，并且由于该静态项位于顶部，因此具有滚动到顶部的效果。

对于解决方法，您可以使用 Paging 的 built-in support for headers

ViewModel.kt

val windList = Pager(..) { ..}
  .map { pagingData ->
    pagingData.insertHeaderItem(..)
  }
  .cachedIn(viewModelScope)
  .collectAsLazyPagingItems()

另外，我建议在项目中实现键映射，因为它将帮助您为 Compose 的LazyColumn 提供稳定的 id，使其了解如何在刷新或配置更改时恢复滚动位置。