SwiftUI List 分页与无限滚动：初学者指南

2024-01-12 14:20:30

优化大型数据集：SwiftUI 中的分页和无限滚动技术

在构建 iOS 应用程序时，我们经常需要在可滚动列表中处理大量数据。为了在不影响性能和用户体验的情况下有效地实现此目标，我们可以利用分页或无限滚动技术。本文将深入探讨如何在 SwiftUI 中实施这些技术，并通过示例代码进行说明。

分页：按需加载数据

分页是一种将数据分成较小块的技术。当用户滚动列表时，只会按需加载下一组数据。这可以显着提高处理大型数据集的性能，因为应用程序不必一次加载所有数据。

要使用 SwiftUI 实现分页，可以使用 onAppear 修改器。此修改器会在视图可见时触发一个操作。我们可以利用此操作来检查是否已到达列表的底部，如果是，则触发一个网络请求以加载下一页数据。

struct PaginatedListView: View {
    @State private var currentPage = 1
    @State private var data = [Model]()

    var body: some View {
        List {
            ForEach(data) { item in
                // Display item
            }
            .onAppear {
                if isAtBottom {
                    currentPage += 1
                    loadData(page: currentPage)
                }
            }
        }
    }

    // Function to check if at the bottom of list
    private var isAtBottom: Bool {
        return data.count >= currentPage * pageSize
    }

    // Function to load data for a specific page
    private func loadData(page: Int) {
        // API call to load data
        // Update data state with new data
    }
}

无限滚动：持续加载数据

无限滚动与分页类似，但它不会将数据分成较小的块。相反，它会在用户滚动时不断加载新数据。这对于需要持续更新数据源的应用程序非常有用，例如聊天应用程序或社交媒体提要。

要使用 SwiftUI 实现无限滚动，可以使用 onReceive 修改器。此修改器会在发布者发出的值发生更改时触发一个操作。我们可以使用此操作来监视列表的滚动偏移量，并在达到特定阈值时触发一个网络请求以加载新数据。

struct InfiniteScrollView: View {
    @State private var data = [Model]()
    @State private var isFetching = false

    var body: some View {
        List {
            ForEach(data) { item in
                // Display item
            }
            .onReceive(Publishers.scroll) { position in
                if !isFetching && position.y > geometry.size.height * 0.75 {
                    isFetching = true
                    loadData()
                }
            }
        }
    }

    // Function to load new data
    private func loadData() {
        // API call to load data
        // Update data state with new data
        isFetching = false
    }
}