SwiftUI中如何为TabView添加滚动位置变化监听事件？

要实现PageTabViewStyle下的TabView滚动位置实时更新，直接添加DragGesture会和TabView内置手势冲突，推荐通过桥接UIKit的UIPageViewController来实现——因为它底层依赖UIScrollView，可直接监听滚动事件，避免手势冲突问题。

步骤1：定义滚动进度管理器 #

创建ObservableObject来存储滚动进度，让SwiftUI视图能实时响应更新：

class PageScrollProgress: ObservableObject {
    @Published var progress: CGFloat = 0.0
}

步骤2：封装UIPageViewController #

通过UIViewRepresentable将UIPageViewController包装成SwiftUI可调用的视图，并监听内部UIScrollView的滚动事件：

struct PageTabViewController: UIViewRepresentable {
    var pages: [UIViewController]
    @ObservedObject var scrollProgress: PageScrollProgress
    
    func makeUIView(context: Context) -> UIPageViewController {
        let pageVC = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal)
        pageVC.dataSource = context.coordinator
        pageVC.delegate = context.coordinator
        pageVC.setViewControllers([pages.first!], direction: .forward, animated: false)
        
        // 获取内部UIScrollView并设置代理监听滚动
        if let scrollView = pageVC.view.subviews.first(where: { $0 is UIScrollView }) as? UIScrollView {
            scrollView.delegate = context.coordinator
        }
        
        return pageVC
    }
    
    func updateUIView(_ uiView: UIPageViewController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate, UIScrollViewDelegate {
        var parent: PageTabViewController
        
        init(_ parent: PageTabViewController) {
            self.parent = parent
        }
        
        // 实现UIPageViewController页面切换数据源方法
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
            guard let index = parent.pages.firstIndex(of: viewController), index > 0 else { return nil }
            return parent.pages[index - 1]
        }
        
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
            guard let index = parent.pages.firstIndex(of: viewController), index < parent.pages.count - 1 else { return nil }
            return parent.pages[index + 1]
        }
        
        // 实时计算并更新滚动进度
        func scrollViewDidScroll(_ scrollView: UIScrollView) {
            let pageWidth = scrollView.frame.width
            // progress范围：0.0（第一页）~ (页面数-1)（最后一页），拖拽过程中实时变化
            let progress = scrollView.contentOffset.x / pageWidth
            parent.scrollProgress.progress = progress
        }
    }
}

步骤3：在SwiftUI视图中使用 #

将原SwiftUI页面转成UIHostingController，传入封装好的视图即可：

struct ContentView: View {
    @StateObject private var scrollProgress = PageScrollProgress()
    
    // 把SwiftUI视图转换为UIViewController数组
    private var pages: [UIViewController] {
        [
            UIHostingController(rootView: Text("Example 1")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.blue)
                .foregroundColor(.white)),
            UIHostingController(rootView: Text("Example 2")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.green)
                .foregroundColor(.white)),
            UIHostingController(rootView: Text("Example 3")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.orange)
                .foregroundColor(.white))
        ]
    }
    
    var body: some View {
        VStack {
            // 实时展示滚动进度
            Text("滚动进度: \(scrollProgress.progress, specifier: "%.2f")")
                .font(.headline)
                .padding()
            
            PageTabViewController(pages: pages, scrollProgress: scrollProgress)
                .ignoresSafeArea()
        }
    }
}

补充说明 #

• 该方案直接监听UIPageViewController内部的UIScrollView，完全避免了手势冲突问题，滚动进度更新精准。
• progress值的范围为0.0 ~ (页面总数-1)，比如3个页面时，进度从0.0（停留在第一页）到2.0（停留在第三页），拖拽过程中会实时变化。

内容的提问来源于stack exchange，提问作者Rick Waalders