Jetpack Compose Paging3 滚动到最后一项时如何触发加载下一页

Paging3 搭配 Jetpack Compose 使用时，LazyPagingItems 本身已经内置了滚动到列表尾部自动触发下一页加载的逻辑，你不需要手动编写触发加载的代码，仅需要按以下方式将数据绑定到列表即可：

val lazyPagingItems = viewModel.getAllItems().collectAsLazyPagingItems()

LazyColumn {
    // 绑定分页数据到列表项
    items(lazyPagingItems) { item ->
        item?.let {
            // 你的自定义列表项布局
            ListItemComponent(data = it)
        }
    }

    // 可选：添加列表底部的加载状态提示
    when (lazyPagingItems.loadState.append) {
        is LoadState.Loading -> {
            item { 
                CircularProgressIndicator(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                        .wrapContentWidth(Alignment.CenterHorizontally)
                )
            }
        }
        is LoadState.Error -> {
            val error = (lazyPagingItems.loadState.append as LoadState.Error).error
            item {
                Text(
                    text = "加载失败，点击重试",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                        .clickable { lazyPagingItems.retry() }
                        .wrapContentWidth(Alignment.CenterHorizontally),
                    color = Color.Red
                )
            }
        }
        is LoadState.NotLoading -> {
            if (lazyPagingItems.loadState.append.endOfPaginationReached) {
                item {
                    Text(
                        text = "已加载全部内容",
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp)
                            .wrapContentWidth(Alignment.CenterHorizontally),
                        color = Color.Gray
                    )
                }
            }
        }
    }
}

实现原理说明 #

• LazyPagingItems 和 Compose 的懒加载列表组件深度适配，当列表滚动到距离最后一个已加载条目还有预设距离时，内部会自动调用 PagingSource 的 load 方法拉取下一页数据，新数据会自动追加到现有数据源中，触发列表自动更新。
• 如果你需要调整预加载的触发时机，可以在创建 Pager 时通过 PagingConfig 的 prefetchDistance 参数配置，默认值等于你设置的单页加载数量pageSize：

Pager(
    config = PagingConfig(
        pageSize = 20, // 单页加载20条数据
        prefetchDistance = 30, // 距离最后一个已加载条目还有30条时就开始预加载下一页
        enablePlaceholders = false
    ),
    pagingSourceFactory = { YourCustomPagingSource() }
)

• 特殊场景需要手动触发重新加载下一页时，直接调用 lazyPagingItems.retry() 方法即可，正常滚动场景不需要手动调用。

内容的提问来源于stack exchange，提问作者Arthur