【问题标题】:SwiftUI: How to implement paging on user swipe? (Previously used UICollectionView -> paging enabled)SwiftUI:如何在用户滑动时实现分页? (之前使用的 UICollectionView -> 启用分页)
【发布时间】:2026-02-10 02:20:06
【问题描述】:

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

问题:我找不到在 SwiftUI 中启用这种“分页”(基于用户滑动)的方法。很难想象 Apple 在没有 Paging 功能的情况下制作了这个新框架?如果他们没有包括这个,有没有解决方法?否则,有没有一种简单的方法可以将 UICollectionView 包含到 SwiftUIView 中?

任何帮助或解决方法都会很好!谢谢:)

【问题讨论】:

  • 转换的原因是什么?

标签: ios swift listview uicollectionview swiftui


【解决方案1】:

SwiftUI 2

看起来LazyGrid 可能是您需要的。

这是一个垂直网格的示例代码:

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 1

如果您绑定到 iOS 13 或 LazyGrid 只是不符合您的期望,您仍然可以将您的 UICollectionView 包装在 UIViewRepresentable 中。

更多解释见此链接:Implementing UICollectionView / UICollectionView DiffableDataSource in SwiftUI

【讨论】:

  • 谢谢!!我将在本周晚些时候尝试实施这一点。我正在运行 Xcode 11.6(没有 LazyGrid),但我刚刚下载了 Xcode 12.0 测试版并立即查看!但是,据我了解,当 Xcode 处于测试阶段时,我们实际上无法从 Xcode 部署构建。你知道我们什么时候期望 Xcode 12.0 可以用来将一个版本推送到 App Store 吗?我对此很陌生,只是想谨慎构建 Beta 版本并不得不等待数月才能将其部署到 App Store?
  • @purebreadd 目前还没有官方消息,可能在秋天。请注意,SwiftUI 2.0 在 iOS14+ 上可用,SwiftUI 1.0 在 iOS13+ 上可用。最好在 在 SwiftUI 中重写您的应用程序之前了解这一点。
  • 您好,我现在正在使用 GridItems,并且已经将惰性单元格放置到位。但是,ScrollViews 只是平滑滚动而不是分页。知道如何在它们上启用“分页”吗? UICollectionView 曾经有一个不错的小委托 :(
  • @purebreadd 您可以使用 UIViewRepresentable 将 UIKit 集成到 SwiftUI 中。见Implementing UICollectionView / UICollectionView DiffableDataSource in SwiftUI。我也更新了我的答案。
  • 如果你很好奇,我经历了将 UICollectionView 转换为 SwiftUI 并将所有自定义大小/单元格合并到我们的应用程序中的过程,这变得很头疼。这种方法可能最适合简单的 UICollectionViews。无论如何,我们现在的解决方案是使用旧项目(将功能保留在具有复杂 CollecionView 的屏幕上)并且仅将不需要此功能的屏幕更新到 SwiftUI。再次感谢您的帮助:)
【解决方案2】:

您可以尝试使用带有此类自定义修饰符的滚动视图来实现此功能:

struct ScrollViewPagingModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .onAppear {
                UIScrollView.appearance().isPagingEnabled = true
            }
            .onDisappear {
                UIScrollView.appearance().isPagingEnabled = false
            }
    }
}

extension ScrollView {
    func isPagingEnabled() -> some View {
        modifier(ScrollViewPagingModifier())
    }
}

【讨论】: