从SwiftUI使用UIPageView时，同一页面连续显示两次的问题

iovurdzv  于 2023-11-16  发布在  Swift
关注(0)|答案(1)|浏览(152)

分页是通过SwiftUI中的UIPageView实现的。我遇到了一个问题，在页面滑动时，同一个页面连续显示两次。导致这种现象的条件是翻页的速度。这个问题在缓慢或非常快的翻页时不会出现，但在中速翻页时会出现。Here is a video of this phenomenon.
复制的完整代码附在下面。您的帮助将不胜感激。提前感谢您。

  1. struct ContentView: View {
  2.     @State var currentPage: Int = 2
  3.     
  4.     var body: some View {
  5.         VStack {
  6.             Text(currentPage.description)
  7.                 .font(.largeTitle)
  8.             PageView(
  9.                 pages: Array(0...100).map({ num in
  10.                     Text("Page of \(num)")
  11.                         .font(.largeTitle)
  12.                         .padding(100)
  13.                         .background(Color(.systemOrange))
  14.                         .cornerRadius(10)
  15.                 }),
  16.                 currentPage: $currentPage)
  17.         }
  18.     }
  19. }
  21. struct PageView<Page: View>: UIViewControllerRepresentable {
  22.     
  23.     var pages: [Page]
  24.     @Binding var currentPage: Int
  25.     
  26.     func makeUIViewController(context: Context) -> UIPageViewController {
  27.         let pageViewController = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: [UIPageViewController.OptionsKey.interPageSpacing: 30])
  28.         pageViewController.dataSource = context.coordinator
  29.         pageViewController.delegate = context.coordinator
  31.         return pageViewController
  32.     }
  33.     
  34.     func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
  35.         context.coordinator.controllers = pages.map({
  36.             let hostingController = UIHostingController(rootView: $0)
  37.             hostingController.view.backgroundColor = .clear
  38.             return hostingController
  39.         })
  40.         let currentViewController = context.coordinator.controllers[currentPage]
  41.         pageViewController.setViewControllers([currentViewController], direction: .forward, animated: false)
  42.     }
  43.     
  44.     func makeCoordinator() -> Coordinator {
  45.         return Coordinator(parent: self, pages: pages)
  46.     }
  47.     
  48.     class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
  49.         
  50.         var parent: PageView
  51.         var controllers: [UIViewController]
  52.         
  53.         init(parent: PageView, pages: [Page]) {
  54.             self.parent = parent
  55.             self.controllers = pages.map({
  56.                 let hostingController = UIHostingController(rootView: $0)
  57.                 hostingController.view.backgroundColor = .clear
  58.                 return hostingController
  59.             })
  60.         }
  61.         
  62.         func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
  63.             guard let index = controllers.firstIndex(of: viewController) else {
  64.                 return controllers[parent.currentPage - 1]
  65.             }
  66.             if index == 0 {
  67.                 return nil
  68.             }
  69.             return controllers[index - 1]
  70.         }
  71.         
  72.         func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
  73.             guard let index = controllers.firstIndex(of: viewController) else {
  74.                 return controllers[parent.currentPage + 1]
  75.             }
  76.             if index + 1 == controllers.count {
  77.                 return nil
  78.             }
  79.             return controllers[index + 1]
  80.         }
  81.         func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
  82.             if completed,
  83.                 let currentViewController = pageViewController.viewControllers?.first,
  84.                 let currentIndex = controllers.firstIndex(of: currentViewController)
  85.             {
  86.                 parent.currentPage = currentIndex
  87.             }
  88.         }
  89.     }
  90. }

字符串
我们也尝试过从TabView、ScrollView等SwiftUI中实现分页，但我想显示的屏幕非常重，使用UIKit的UIPageView的方法是唯一一个几乎没有屏幕蚕食的方法。

swift

1条答案

按热度按时间
jm2pwxwz

jm2pwxwz1#

在didFinishAnimating中，只有在controllers中找到当前视图控制器时才更新currentPage：

  1. if completed,
  2.     let currentViewController = pageViewController.viewControllers?.first,
  3.     let currentIndex = controllers.firstIndex(of: currentViewController)
  4. {
  5.     parent.currentPage = currentIndex
  6. }

字符串
考虑一下当你设置parent.currentPage-updateUIViewController将被调用时会发生什么，你给予一个全新的VC数组给协调器。如果此时didFinishAnimating被再次调用，currentViewController仍然包含旧的示例。它不会在controllers中找到currentViewController，并且无法设置currentPage。
请注意，setViewControllers仅在动画完成后更改pageViewController.viewControllers。
因此，要解决这个问题，只需在每次视图更新时不给予新的UIHostingController s即可：

  1. func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
  2.     let currentViewController = context.coordinator.controllers[currentPage]
  3.     pageViewController.setViewControllers([currentViewController], direction: .forward, animated: false) 
  4. }

型
如果你有一个恒定的页面集，这就可以工作。否则，这意味着当pages改变时，你将无法更新视图控制器。
更好的解决方案是使用面向数据的方法，就像所有其他SwiftUI视图一样。
这个想法是PageView应该接受一个 data 的列表，而不是View s的列表。它还需要一个将数据转换为View s的函数。
协调器还使用 data。在数据数组上使用firstIndex(of:)，并且仅在必要时创建VC。
下面是一个粗略的草图。它可以工作，但它可能可以通过使用Identifiable和Dictionary来优化。如果数据没有改变，makeVC制作的VC也可以重用。

  1. struct PageView<Data: Equatable, Page: View>: UIViewControllerRepresentable {
  2.     
  3.     let pages: [Data]
  4.     @Binding var currentPage: Int
  5.     @ViewBuilder let pageView: (Data) -> Page
  6.     
  7.     func makeUIViewController(context: Context) -> UIPageViewController {
  8.         let pageViewController = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: [UIPageViewController.OptionsKey.interPageSpacing: 30])
  9.         pageViewController.dataSource = context.coordinator
  10.         pageViewController.delegate = context.coordinator
  11.         
  12.         return pageViewController
  13.     }
  14.     
  15.     func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
  16.         context.coordinator.pages = pages
  17.         context.coordinator.pageView = pageView
  18.         let currentViewController = context.coordinator.makeVC(page: pages[currentPage])
  19.         pageViewController.setViewControllers([currentViewController], direction: .forward, animated: false)
  20.         context.coordinator.pageDidChange = { currentPage = $0 }
  21.     }
  22.     
  23.     func makeCoordinator() -> Coordinator {
  24.         return Coordinator(pages: pages, pageView: pageView)
  25.     }
  26.     
  27.     class PageHostingController: UIHostingController<Page> {
  28.         let data: Data
  29.         
  30.         init(rootView: Page, data: Data) {
  31.             self.data = data
  32.             super.init(rootView: rootView)
  33.         }
  34.         
  35.         @MainActor required dynamic init?(coder aDecoder: NSCoder) {
  36.             fatalError("init(coder:) has not been implemented")
  37.         }
  38.     }
  39.     
  40.     class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
  41.         var pageDidChange: ((Int) -> Void)?
  42.         var pages: [Data]
  43.         var pageView: (Data) -> Page
  44.         
  45.         init(pages: [Data], @ViewBuilder pageView: @escaping (Data) -> Page) {
  46.             self.pages = pages
  47.             self.pageView = pageView
  48.         }
  49.         
  50.         func makeVC(page: Data) -> PageHostingController {
  51.             let hostingController = PageHostingController(rootView: pageView(page), data: page)
  52.             hostingController.view.backgroundColor = .clear
  53.             return hostingController
  54.         }
  55.         
  56.         func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
  57.             guard let pageHost = viewController as? PageHostingController,
  58.                   let index = pages.firstIndex(of: pageHost.data) else {
  59.                 return nil
  60.             }
  61.             if index == 0 {
  62.                 return nil
  63.             }
  64.             return makeVC(page: pages[index - 1])
  65.         }
  66.         
  67.         func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
  68.             guard let pageHost = viewController as? PageHostingController,
  69.                   let index = pages.firstIndex(of: pageHost.data) else {
  70.                 return nil
  71.             }
  72.             if index + 1 == pages.count {
  73.                 return nil
  74.             }
  75.             return makeVC(page: pages[index + 1])
  76.         }
  77.         
  78.         func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
  79.             if completed,
  80.                let currentViewController = pageViewController.viewControllers?.first as? PageHostingController,
  81.                let currentIndex = pages.firstIndex(of: currentViewController.data)
  82.             {
  83.                 pageDidChange?(currentIndex)
  84.             }
  85.         }
  86.     }
  87. }

型
示例用法：

  1. @State var currentPage: Int = 2
  2. @State var pages = [1,2,3]
  4. var body: some View {
  5.     VStack {
  6.         Text(currentPage.description)
  7.             .font(.largeTitle)
  8.         PageView(
  9.             pages: pages,
  10.             currentPage: $currentPage) { num in
  11.                 Text("Page of \(num)")
  12.                     .font(.largeTitle)
  13.                     .padding(100)
  14.                     .background(Color(.systemOrange))
  15.                     .cornerRadius(10)
  16.             }
  17.         Button("Add") {
  18.             pages.append(pages.count + 1)
  19.         }
  20.     }
  21. }

型

展开查看全部
赞(0）分享  回复(0）举报  2023-11-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com