SwiftUI 滑动分页: 无需手动计算计数，巧用 UIScrollView

SwiftUI 中分页滑动的挑战

在 SwiftUI 中，ScrollView 是实现列表或可滚动内容的默认方式。虽然它提供了丰富的自定义选项，但它缺乏一个关键特性：自动分页。默认情况下，ScrollView 会连续滚动，这在大多数情况下很实用，但对于分页布局来说却不够理想。

巧用 UIScrollView 实现分页

为了解决这个问题，我们可以求助于 UIScrollView，它提供了专门的分页功能。通过将 SwiftUI 的 ScrollView 嵌套在 UIScrollView 中，我们可以享受两全其美的优势：SwiftUI 的声明式语法和 UIScrollView 的分页功能。

步骤 1：创建一个 UIScrollView 容器

struct PaginatedScrollView<Content: View>: UIViewRepresentable {

    // ...省略其他代码...

    func makeUIView(context: Context) -> UIScrollView {
        let scrollView = UIScrollView()
        scrollView.isPagingEnabled = true
        return scrollView
    }

    // ...省略其他代码...
}

步骤 2：将 SwiftUI 内容包裹在 UIScrollView 中

struct PaginatedContentView: View {
    
    // ...省略其他代码...

    var body: some View {
        PaginatedScrollView {
            // SwiftUI 内容在这里
        }
    }
}

现在，当你在 SwiftUI 中使用 PaginatedContentView 时，它将自动在 UIScrollView 中进行分页滑动，而无需你手动计算页面数量。

案例演示：分页图片画廊

让我们通过一个实际案例来演示这种方法。假设我们想创建一个图片画廊，其中图片水平滑动分页。

struct ImageGallery: View {

    let images = ["image1", "image2", "image3"]

    var body: some View {
        PaginatedContentView {
            ForEach(images, id: \.self) { image in
                Image(image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            }
        }
    }
}

这个 ImageGallery 视图将显示一个水平滑动的分页图片画廊，无需任何额外的代码来计算页面数量或管理分页。

结论

通过将 UIScrollView 的分页功能与 SwiftUI 的优雅语法相结合，我们创建了一个强大的解决方案，用于在 SwiftUI 中实现流畅、无缝的分页滑动。现在，你可以轻松地构建分页列表、图片画廊和其他需要分页功能的应用程序，同时保留 SwiftUI 开发的便利性。告别繁琐的计算和手动管理，拥抱无忧无虑的分页滑动体验！