我一直在查看每个测试版的文档，但还没有看到制作传统分页 ScrollView 的方法。我对 AppKit 不熟悉，所以我想知道这在 SwiftUI 中是否不存在，因为它主要是一个 UIKit 构造。无论如何，有没有人有这方面的例子，或者任何人都可以告诉我这绝对不可能，所以我可以停止寻找并自己滚动？
【问题讨论】：
标签： uiscrollview swiftui
您现在可以使用 TabView 并将 .tabViewStyle 设置为 PageTabViewStyle()
TabView {
View1()
View2()
View3()
}
.tabViewStyle(PageTabViewStyle())
【讨论】：
从 Beta 3 开始，没有用于分页的原生 SwiftUI API。我已提交反馈并建议您也这样做。他们将ScrollView API 从 Beta 2 更改为 Beta 3，看到进一步的更新我不会感到惊讶。
现在可以包装UIScrollView 以提供此功能。不幸的是，您必须将 UIScrollView 包装在 UIViewController 中，并进一步将其包装在 UIViewControllerRepresentable 中以支持 SwiftUI 内容。
class UIScrollViewViewController: UIViewController {
lazy var scrollView: UIScrollView = {
let v = UIScrollView()
v.isPagingEnabled = true
return v
}()
var hostingController: UIHostingController<AnyView> = UIHostingController(rootView: AnyView(EmptyView()))
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(self.scrollView)
self.pinEdges(of: self.scrollView, to: self.view)
self.hostingController.willMove(toParent: self)
self.scrollView.addSubview(self.hostingController.view)
self.pinEdges(of: self.hostingController.view, to: self.scrollView)
self.hostingController.didMove(toParent: self)
}
func pinEdges(of viewA: UIView, to viewB: UIView) {
viewA.translatesAutoresizingMaskIntoConstraints = false
viewB.addConstraints([
viewA.leadingAnchor.constraint(equalTo: viewB.leadingAnchor),
viewA.trailingAnchor.constraint(equalTo: viewB.trailingAnchor),
viewA.topAnchor.constraint(equalTo: viewB.topAnchor),
viewA.bottomAnchor.constraint(equalTo: viewB.bottomAnchor),
])
}
}
struct UIScrollViewWrapper<Content: View>: UIViewControllerRepresentable {
var content: () -> Content
init(@ViewBuilder content: @escaping () -> Content) {
self.content = content
}
func makeUIViewController(context: Context) -> UIScrollViewViewController {
let vc = UIScrollViewViewController()
vc.hostingController.rootView = AnyView(self.content())
return vc
}
func updateUIViewController(_ viewController: UIScrollViewViewController, context: Context) {
viewController.hostingController.rootView = AnyView(self.content())
}
}
然后使用它：
var body: some View {
GeometryReader { proxy in
UIScrollViewWrapper {
VStack {
ForEach(0..<1000) { _ in
Text("Hello world")
}
}
.frame(width: proxy.size.width) // This ensures the content uses the available width, otherwise it will be pinned to the left
}
}
}
【讨论】：
Apple 的官方教程以此为例。我发现它很容易理解并且适合我的情况。我真的建议您检查一下并尝试了解如何与 UIKit 交互。由于 SwiftUI 还很年轻，所以目前不会涵盖 UIKit 中的所有功能。与 UIKit 的接口应该可以满足大部分需求。
https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit
【讨论】：
不确定这是否对您的问题有帮助，但目前，当 Apple 致力于在 SwiftUI 中添加分页视图时，我编写了一个 utility library，它在使用隐藏在引擎盖下的 UIPageViewController 时给您一种 SwiftUI 的感觉离开。
你可以这样使用它：
Pages {
Text("Page 1")
Text("Page 2")
Text("Page 3")
Text("Page 4")
}
或者，如果您的应用程序中有一个模型列表，您可以像这样使用它：
struct Car {
var model: String
}
let cars = [Car(model: "Ford"), Car(model: "Ferrari")]
ModelPages(cars) { index, car in
Text("The \(index) car is a \(car.model)")
.padding(50)
.foregroundColor(.white)
.background(Color.blue)
.cornerRadius(10)
}
【讨论】：
Text("Page \(currentPage)") 的一部分），之后我不能再滑动超过一页。不确定这是一个 SwiftUI 错误还是我们不应该这样使用的东西，但我在尝试以 SwiftUIy 方式包装 UIPageViewController 时遇到了同样的问题。
您可以使用.onAppear() 简单地跟踪状态以加载您的下一页。
struct YourListView : View {
@ObservedObject var viewModel = YourViewModel()
let numPerPage = 50
var body: some View {
NavigationView {
List(viewModel.items) { item in
NavigationLink(destination: DetailView(item: item)) {
ItemRow(item: item)
.onAppear {
if self.shouldLoadNextPage(currentItem: item) {
self.viewModel.fetchItems(limitPerPage: self.numPerPage)
}
}
}
}
.navigationBarTitle(Text("Items"))
.onAppear {
guard self.viewModel.items.isEmpty else { return }
self.viewModel.fetchItems(limitPerPage: self.numPerPage)
}
}
}
private func shouldLoadNextPage(currentItem item: Item) -> Bool {
let currentIndex = self.viewModel.items.firstIndex(where: { $0.id == item.id } )
let lastIndex = self.viewModel.items.count - 1
let offset = 5 //Load next page when 5 from bottom, adjust to meet needs
return currentIndex == lastIndex - offset
}
}
class YourViewModel: ObservableObject {
@Published private(set) items = [Item]()
// add whatever tracking you need for your paged API like next/previous and count
private(set) var fetching = false
private(set) var next: String?
private(set) var count = 0
func fetchItems(limitPerPage: Int = 30, completion: (([Item]?) -> Void)? = nil) {
// Do your stuff here based on the API rules for paging like determining the URL etc...
if items.count == 0 || items.count < count {
let urlString = next ?? "https://somePagedAPI?limit=/(limitPerPage)"
fetchNextItems(url: urlString, completion: completion)
} else {
completion?(pokemon)
}
}
private func fetchNextItems(url: String, completion: (([Item]?) -> Void)?) {
guard !fetching else { return }
fetching = true
Networking.fetchItems(url: url) { [weak self] (result) in
DispatchQueue.main.async { [weak self] in
self?.fetching = false
switch result {
case .success(let response):
if let count = response.count {
self?.count = count
}
if let newItems = response.results {
self?.items += newItems
}
self?.next = response.next
case .failure(let error):
// Error state tracking not implemented but would go here...
os_log("Error fetching data: %@", error.localizedDescription)
}
}
}
}
}
修改以适应您正在调用的任何 API，并根据您的应用架构处理错误。
【讨论】：
结帐SwiftUIPager。这是一个建立在 SwiftUI 原生组件之上的寻呼机：
【讨论】：
如果您想利用TabView 的新PageTabViewStyle，但需要垂直分页滚动视图，则可以使用.rotationEffect() 等效果修饰符。
使用这种方法，我编写了一个名为 VerticalTabView ? 的 library，只需将现有的 TabView 更改为 VTabView 即可将 TabView 垂直。
【讨论】：
你可以使用这样的自定义修饰符：
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())
}
}
【讨论】：