SwiftUI TabView拖拽手势开始与结束时执行代码的问题

核心原因 #

SwiftUI的TabView在使用PageTabViewStyle时，底层依赖UIPageViewController实现，其内部自带的拖拽手势会在拖拽结束时抢占事件响应权，导致你添加的自定义DragGesture的onEnded回调被系统拦截，无法触发。

具体解决方案 #

1. 先清理冗余代码

你当前代码里重复调用了两次.tabViewStyle(PageTabViewStyle())，第二次会覆盖第一次的indexDisplayMode配置，先删掉重复的那行，避免不必要的干扰：

TabView {
    ForEach(0..<5) { index in
        VStack(spacing: 0) {
            // content
        }
    }
}
.ignoresSafeArea()
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always)) // 保留这一行即可
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

2. 方案一：使用UIKit手势识别器桥接（无第三方依赖）

通过UIViewRepresentable封装UIPageViewController，直接控制内部的手势代理，这样可以完整监听拖拽的开始和结束：

struct PageTabView: UIViewRepresentable {
    var pageCount: Int
    var onDragStart: () -> Void
    var onDragEnd: () -> Void
    
    func makeUIView(context: Context) -> UIPageViewController {
        let pageVC = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal)
        pageVC.dataSource = context.coordinator
        pageVC.delegate = context.coordinator
        
        // 获取内部的拖拽手势
        if let panGesture = pageVC.view.gestureRecognizers?.first(where: { $0 is UIPanGestureRecognizer }) as? UIPanGestureRecognizer {
            panGesture.addTarget(context.coordinator, action: #selector(context.coordinator.handlePan(_:)))
        }
        
        // 设置初始页面
        let firstVC = UIHostingController(rootView: PageContent(index: 0))
        pageVC.setViewControllers([firstVC], direction: .forward, animated: false)
        return pageVC
    }
    
    func updateUIView(_ uiView: UIPageViewController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        let parent: PageTabView
        
        init(parent: PageTabView) {
            self.parent = parent
        }
        
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
            guard let index = (viewController as? UIHostingController<PageContent>)?.rootView.index else { return nil }
            return index > 0 ? UIHostingController(rootView: PageContent(index: index - 1)) : nil
        }
        
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
            guard let index = (viewController as? UIHostingController<PageContent>)?.rootView.index else { return nil }
            return index < parent.pageCount - 1 ? UIHostingController(rootView: PageContent(index: index + 1)) : nil
        }
        
        @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
            switch gesture.state {
            case .began:
                parent.onDragStart()
            case .ended, .cancelled, .failed:
                parent.onDragEnd()
            default:
                break
            }
        }
    }
}

// 页面内容视图
struct PageContent: View {
    let index: Int
    var body: some View {
        VStack(spacing: 0) {
            Text("Page \(index)")
                .font(.largeTitle)
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        PageTabView(pageCount: 5,
                    onDragStart: { print("Drag gesture begins") },
                    onDragEnd: { print("Drag gesture ends") })
        .ignoresSafeArea()
    }
}

3. 方案二：使用Introspect库简化操作（依赖第三方）

如果你不想自己封装UIPageViewController，可以用Introspect库直接获取底层的UIPageViewController，添加手势监听：
首先在Podfile或Package.swift中引入Introspect，然后修改代码：

import SwiftUI
import Introspect

struct ContentView: View {
    var body: some View {
        TabView {
            ForEach(0..<5) { index in
                VStack(spacing: 0) {
                    Text("Page \(index)")
                        .font(.largeTitle)
                }
            }
        }
        .ignoresSafeArea()
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        .introspectViewController { vc in
            guard let pageVC = vc as? UIPageViewController else { return }
            if let panGesture = pageVC.view.gestureRecognizers?.first(where: { $0 is UIPanGestureRecognizer }) as? UIPanGestureRecognizer {
                // 避免重复添加目标
                panGesture.removeTarget(nil, action: nil)
                panGesture.addTarget(self, action: #selector(handlePan(_:)))
            }
        }
    }
    
    @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
        switch gesture.state {
        case .began:
            print("Drag gesture begins")
        case .ended, .cancelled, .failed:
            print("Drag gesture ends")
        default:
            break
        }
    }
}

4. 方案三：监听TabView的selection结合拖拽状态（轻量但精度有限）

如果不需要严格监听拖拽结束的瞬间，只是想在页面切换完成时触发逻辑，可以结合@State变量监听selection变化，配合拖拽开始的标记：

struct ContentView: View {
    @State private var currentPage = 0
    @State private var isDragging = false
    
    var body: some View {
        TabView(selection: $currentPage) {
            ForEach(0..<5) { index in
                VStack(spacing: 0) {
                    Text("Page \(index)")
                        .font(.largeTitle)
                }
                .tag(index)
            }
        }
        .ignoresSafeArea()
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        .simultaneousGesture(
            DragGesture()
                .onChanged { _ in
                    if !isDragging {
                        print("Drag gesture begins")
                        isDragging = true
                    }
                }
        )
        .onChange(of: currentPage) { _ in
            if isDragging {
                print("Drag gesture ends (page changed)")
                isDragging = false
            }
        }
        .onTapGesture {
            isDragging = false // 点击页码切换时重置状态
        }
    }
}

注意：这个方案无法区分拖拽到一半取消的情况，只能在页面切换完成时触发，适合对精度要求不高的场景。

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