SwiftUI：如何实现用户滑动分页？（以前使用过 UICollectionView -> 启用分页）

Question

背景：我正在将一个项目从 UIKit 转换为 SwiftUI。目前使用 UIKit，我在 UICollectionView 中有一个 UICollectionView，两者都启用了分页。这允许用户在单元格上向上/向下和向左/向右滑动。每个单元格都会填充整个屏幕（类似于 TikTok 的主 UI），并且每个单元格都有大量要从 Firebase 中提取的数据，因此我不想在第一个视图出现时加载所有项目，而是在每个单元格出现时加载所有项目（这是 UIKit 下通过 UICollectionView 委托的当前实现）。

问题：我找不到在 SwiftUI 中启用此“分页”（基于用户滑动）的方法。很难想象苹果制作的这个新框架没有 Paging 功能？如果他们没有包含此内容，是否有解决方法？否则，是否有一种简单的方法将 UICollectionView 包含到 SwiftUIView 中？

任何帮助或解决方法都会很好！谢谢 ：）

Answer 1

iOS 17 中的水平/垂直分页

从iOS 17开始，您可以通过在 上应用以下修饰符来启用分页行为ScrollView：

.scrollTargetBehavior(.paging)

这适用于 bhorizontal和verticalScrollViews。您可以使用.containerRelativeFrame(...)内容来使其大小与滚动视图的可见区域相同：

演示：

ScrollView(.horizontal) {
    LazyHStack {
        ForEach((1...100), id: \.self) { index in
            Text("\(index)")
                .containerRelativeFrame(.horizontal) //  Makes it mathes parent's visible width
                .containerRelativeFrame(.vertical) //  Makes it mathes parent's visible height
        }
    }
}
.scrollTargetBehavior(.paging) //  Enables paging

Answer 2

SwiftUI 2

看起来 aLazyGrid可能就是您所需要的。

这是垂直网格的示例代码：

struct ContentView: View {
    let data = (1...1000).map { "Item \($0)" }

    let columns = [
        GridItem(.adaptive(minimum: 80))
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 20) {
                ForEach(data, id: \.self) { item in
                    Text(item)
                }
            }
            .padding(.horizontal)
        }
    }
}

您可以在这些链接中找到更多信息：

• SwiftUI 惰性网格教程
• 使用 SwiftUI 实现不可能的网格
• 如何使用 LazyVGrid 和 LazyHGrid 在网格中定位视图

SwiftUI 1

如果您绑定了 iOS 13 或者LazyGrid只是不符合您的期望，您仍然可以将您UICollectionView的UIViewRepresentable.

请参阅此链接以获取更多说明：Implementing UICollectionView / UICollectionView DiffableDataSource in SwiftUI