如何使用 SwiftUI 的 List 实现分页

处理较大的数据集时，一次性加载所有内容通常没有必要。很多情况下，我们希望先获取第一页结果，然后随着用户滚动再加载更多内容。

SwiftUI 的 List 很适合这种模式。把它与异步加载和少量分页状态结合起来，我们就能用不多的代码构建一个可预测的无限滚动体验。

本文将介绍如何使用 List 实现分页：当用户到达列表末尾时，加载下一页内容。

开始吧。

实现思路概览

分页可以通过不同方式实现。本文关注的是无限滚动，也就是当用户到达列表末尾时，自动加载新内容。

一种简单且有效的方式，是在列表底部添加一个专门的“加载行”。

当这一行变为可见时，我们就触发下一页请求。

实现列表

我们先渲染当前项目，并按条件添加加载行：

List {
    ForEach(viewModel.items, id: \.id) { item in
        ListItemView(item: item)
    }

    if viewModel.isMoreDataAvailable {
        lastRowView
    }
}

这里的核心思想是：只有在还能加载更多数据时，才显示加载行。

触发分页

加载行负责在出现在屏幕上时触发下一页请求：

var lastRowView: some View {
    ZStack {
        switch viewModel.paginationState {
        case .isLoading:
            ProgressView()

        case .error(let error):
            ErrorView(error)
        }
    }
    .frame(height: 50)
    .onAppear {
        viewModel.loadMoreItems()
    }
}

当用户滚动到列表末尾时，这一行会变为可见，它的 onAppear 修饰符会被触发。

这就是我们加载下一页的时机。

管理分页状态

加载行也为我们提供了一个清晰的位置，用来表示当前分页状态。例如，加载时可以显示进度指示器，请求失败时可以显示带重试选项的错误视图。

这会让行为更可预测，也更容易扩展。

loadMoreItems() 的实现应确保重复的 onAppear 调用不会在上一次分页请求完成前启动多个新的分页请求。

总结

使用专门的加载行，是用 SwiftUI 的 List 实现分页的一种简单且可预测的方式。

当这一行变为可见时触发下一页加载，我们就能构建一个易于理解且易于扩展的无限滚动体验。

原文地址：https://tanaschita.com/swiftui-list-pagination/