SwiftUI中禁用TabView翻页手势且保留子组件滚动的方法

问题原因 #

你使用的highPriorityGesture(DragGesture())会拦截所有拖拽手势，不管方向，导致子视图的垂直ScrollView无法响应滚动操作。下面提供两种可行的解决方案：

方案一：SwiftUI原生手势拦截（仅拦截水平拖拽） #

通过判断拖拽方向，只拦截TabView翻页用的水平拖拽，放行垂直拖拽让子视图处理：

struct OnboardingView: View {
    @ObservedObject var vm = OnboardingVM()
    
    var body: some View {
        VStack {
            TabView(selection: $vm.currentScreenIndex) {
                ForEach(0..<vm.screenOrder.count, id:\.self) { index in
                    ScreenView(vm: vm, screenIndex: index)
                        .tag(index)
                }
            }
            .padding()
            .tabViewStyle(.page(indexDisplayMode: .never))
            // 替换原highPriorityGesture，仅拦截水平拖拽
            .highPriorityGesture(
                DragGesture(minimumDistance: 10)
                    .onChanged { gesture in
                        // 仅当水平拖拽位移大于垂直时，消费手势阻止TabView翻页
                        if abs(gesture.translation.width) > abs(gesture.translation.height) {
                            // 无需额外操作，优先处理此手势即可阻止TabView默认翻页
                        }
                    }
            )
        }
        .environmentObject(vm)
        .background(Color.black)
    }
}

原理：highPriorityGesture会优先于子视图处理手势，我们通过判断拖拽的水平/垂直位移，只在水平拖拽时拦截，垂直拖拽时让手势自然传递给子视图的ScrollView。

方案二：基于UIKit的自定义PageView（彻底禁用翻页手势） #

如果方案一仍有问题，可以直接用UIKit的UIPageViewController包装，通过isPagingEnabled = false彻底禁用翻页手势，完全不影响子视图的滚动：

1. 创建自定义PageView组件

struct PageView<Content: View>: UIViewRepresentable {
    var pages: [Content]
    @Binding var currentPage: Int
    
    func makeUIView(context: Context) -> UIPageViewController {
        let pageVC = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal)
        pageVC.dataSource = context.coordinator
        pageVC.delegate = context.coordinator
        // 核心：禁用翻页手势
        pageVC.isPagingEnabled = false
        // 设置初始页面
        let initialVC = UIHostingController(rootView: pages[currentPage])
        pageVC.setViewControllers([initialVC], direction: .forward, animated: false)
        return pageVC
    }
    
    func updateUIView(_ uiView: UIPageViewController, context: Context) {
        // 当currentPage变化时切换页面
        let targetVC = UIHostingController(rootView: pages[currentPage])
        // 判断切换方向（可选，用于动画效果）
        let direction: UIPageViewController.NavigationDirection = currentPage > context.coordinator.lastPage ? .forward : .reverse
        uiView.setViewControllers([targetVC], direction: direction, animated: true)
        context.coordinator.lastPage = currentPage
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        var parent: PageView
        var lastPage = 0
        
        init(_ parent: PageView) {
            self.parent = parent
            self.lastPage = parent.currentPage
        }
        
        // 实现数据源方法（用于页面切换逻辑）
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
            guard let index = parent.pages.firstIndex(where: {
                (viewController as? UIHostingController<Content>)?.rootView.id == $0.id
            }) else { return nil }
            return index > 0 ? UIHostingController(rootView: parent.pages[index-1]) : nil
        }
        
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
            guard let index = parent.pages.firstIndex(where: {
                (viewController as? UIHostingController<Content>)?.rootView.id == $0.id
            }) else { return nil }
            return index < parent.pages.count-1 ? UIHostingController(rootView: parent.pages[index+1]) : nil
        }
        
        // 监听页面切换完成，更新绑定的currentPage
        func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
            guard completed, let visibleVC = pageViewController.viewControllers?.first as? UIHostingController<Content>,
                  let index = parent.pages.firstIndex(where: { $0.id == visibleVC.rootView.id }) else { return }
            parent.currentPage = index
        }
    }
}

// 给View添加id扩展，方便页面索引判断（可选，若你的ScreenView已有唯一标识可省略）
extension View {
    func id<T: Hashable>(_ value: T) -> some View {
        self.preference(key: IDPreferenceKey.self, value: value)
    }
}

struct IDPreferenceKey: PreferenceKey {
    static var defaultValue: AnyHashable? = nil
    static func reduce(value: inout AnyHashable?, nextValue: () -> AnyHashable?) {
        value = nextValue()
    }
}

2. 在OnboardingView中使用自定义PageView

struct OnboardingView: View {
    @ObservedObject var vm = OnboardingVM()
    
    var body: some View {
        VStack {
            PageView(
                pages: vm.screenOrder.enumerated().map { index in
                    ScreenView(vm: vm, screenIndex: index)
                        .id(index) // 给每个页面添加唯一标识
                },
                currentPage: $vm.currentScreenIndex
            )
            .padding()
        }
        .environmentObject(vm)
        .background(Color.black)
    }
}

原理：直接通过UIKit的API禁用翻页手势，子视图的滚动手势不受任何影响，是最彻底的解决方案。

内容的提问来源于stack exchange，提问作者Nick C.