如何在SwiftUI中实现PageView？

如何在SwiftUI中实现PageView？

页面控制

struct PageControl: UIViewRepresentable {    var numberOfPages: Int    @Binding var currentPage: Int    func makeCoordinator() -> Coordinator {        Coordinator(self)    }    func makeUIView(context: Context) -> UIPageControl {        let control = UIPageControl()        control.numberOfPages = numberOfPages        control.pageIndicatorTintColor = UIColor.lightGray        control.currentPageIndicatorTintColor = UIColor.darkGray        control.addTarget( context.coordinator, action: #selector(Coordinator.updateCurrentPage(sender:)), for: .valueChanged)        return control    }    func updateUIView(_ uiView: UIPageControl, context: Context) {        uiView.currentPage = currentPage    }    class Coordinator: NSObject {        var control: PageControl        init(_ control: PageControl) { self.control = control        }        @objc        func updateCurrentPage(sender: UIPageControl) { control.currentPage = sender.currentPage        }    }}

您的页面浏览量

struct PageView<Page: View>: View {    var viewControllers: [UIHostingController<Page>]    @State var currentPage = 0    init(_ views: [Page]) {        self.viewControllers = views.map { UIHostingController(rootView: 
struct PageViewController: UIViewControllerRepresentable {    var controllers: [UIViewController]    @Binding var currentPage: Int    func makeCoordinator() -> Coordinator {        Coordinator(self)    }    func makeUIViewController(context: Context) -> UIPageViewController {        let pageViewController = UIPageViewController( transitionStyle: .scroll, navigationOrientation: .horizontal)        pageViewController.dataSource = context.coordinator        pageViewController.delegate = context.coordinator        return pageViewController    }    func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {        pageViewController.setViewControllers( [controllers[currentPage]], direction: .forward, animated: true)    }    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {        var parent: PageViewController        init(_ pageViewController: PageViewController) { self.parent = pageViewController        }        func pageViewController( _ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { guard let index = parent.controllers.firstIndex(of: viewController) else {     return nil } if index == 0 {     return parent.controllers.last } return parent.controllers[index - 1]        }        func pageViewController( _ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { guard let index = parent.controllers.firstIndex(of: viewController) else {     return nil } if index + 1 == parent.controllers.count {     return parent.controllers.first } return parent.controllers[index + 1]        }        func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) { if completed,     let visibleViewController = pageViewController.viewControllers?.first,     let index = parent.controllers.firstIndex(of: visibleViewController) {     parent.currentPage = index }        }    }}
) }    }    var body: some View {        ZStack(alignment: .bottom) { PageViewController(controllers: viewControllers, currentPage: $currentPage) PageControl(numberOfPages: viewControllers.count, currentPage: $currentPage)        }    }}

您的页面视图控制器

struct CardView: View {    var album: Album    var body: some View {        URLImage(URL(string: album.albumArtWork)!) .resizable() .aspectRatio(3 / 2, contentMode: .fit)    }}

假设您有一个类似的观点

 PageView(vM.Albums.map { CardView(album: ) }).frame(height: 250)

您可以像这样在主swiftUI视图中使用此组件。