SwiftUI中使用PageTabViewStyle时禁用TabView水平滑动的方法

问题描述 #

我通过PageTabViewStyle实现了页面式的TabView视觉效果，但希望禁止用户通过水平滑动切换页面。尝试过两种方法但均存在问题：

• 将x偏移固定为0：导致TabView的垂直滚动与父视图脱节，滑动时会被其他视图遮挡
• 通过isHorizontalDrag判断动态添加DragGesture()：手势识别不稳定，经常在TabView已经触发滑动后才生效

我的TabView代码如下：

TabView(selection: $tabIndex){
    PasswordCardView(tabIndex: $tabIndex,
                     fieldType: $fieldType,
                     shouldClearPasswords: $shouldClearPasswords,
                     isHorizontalDrag: $isHorizontalDrag)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(0)
    .contentShape(Rectangle())

    UserNameCardView(tabIndex: $tabIndex,
                     fieldType: $fieldType)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(1)
    .contentShape(Rectangle())

    BirthdayCardView(tabIndex: $tabIndex,
                     fieldType: $fieldType,
                     tapGesturePerformed: $tapGesturePerformed,
                     isHorizontalDrag: $isHorizontalDrag)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(2)
    .contentShape(Rectangle())

    GenderCardView(tabIndex: $tabIndex,
                   fieldType: $fieldType,
                   tapGesturePerformed: $tapGesturePerformed)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(3)
    .contentShape(Rectangle())

    LocationCardView(tabIndex: $tabIndex,
                     fieldType: $fieldType,
                     isSignUpShown: $isSignUpShown)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(4)
    .contentShape(Rectangle())

    NewsletterCardView(tabIndex: $tabIndex,
                       fieldType: $fieldType)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(5)
    .contentShape(Rectangle())

    ActivationCardView(tabIndex: $tabIndex,
                       fieldType: $fieldType,
                       dismissSignup: $dismissSignup)
    .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
    .tag(6)
    .contentShape(Rectangle())
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

解决方案 #

方法一：高优先级手势拦截水平拖拽 #

给TabView添加highPriorityGesture，优先拦截水平方向的拖拽手势，同时不影响垂直滚动：

TabView(selection: $tabIndex){
    // ... 原有子视图代码不变 ...
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.highPriorityGesture(
    DragGesture(minimumDistance: 5)
        .onChanged { value in
            // 仅拦截水平方向的拖拽
            if abs(value.translation.width) > abs(value.translation.height) {
                // 空实现，消耗手势避免传递给TabView
            }
        }
)

原理：highPriorityGesture会让我们的手势先于TabView自带的滑动手势被识别，当检测到是水平拖拽时，直接消耗该手势，TabView就不会收到滑动事件，也就不会切换页面；垂直拖拽时，手势会正常传递，不影响滚动交互。

方法二：禁用底层UIPageViewController的滑动手势 #

如果需要更彻底的禁用，可以通过UIViewRepresentable封装UIPageViewController，直接关闭其自带的滑动手势：

struct NonSwipePageView<Content: View>: UIViewRepresentable {
    let contentViews: [Content]
    @Binding var currentIndex: Int
    
    init(currentIndex: Binding<Int>, contentViews: [Content]) {
        self._currentIndex = currentIndex
        self.contentViews = contentViews
    }
    
    func makeUIView(context: Context) -> UIPageViewController {
        let pageVC = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal)
        pageVC.dataSource = context.coordinator
        pageVC.delegate = context.coordinator
        
        // 禁用自带的滑动手势
        pageVC.view.gestureRecognizers?.forEach {
            if $0 is UIPanGestureRecognizer {
                $0.isEnabled = false
            }
        }
        
        // 设置初始页面
        let initialVC = UIHostingController(rootView: contentViews[currentIndex])
        pageVC.setViewControllers([initialVC], direction: .forward, animated: false)
        return pageVC
    }
    
    func updateUIView(_ uiView: UIPageViewController, context: Context) {
        // 当索引变化时切换页面
        guard currentIndex != context.coordinator.lastIndex else { return }
        let direction: UIPageViewController.NavigationDirection = currentIndex > context.coordinator.lastIndex ? .forward : .reverse
        let targetVC = UIHostingController(rootView: contentViews[currentIndex])
        uiView.setViewControllers([targetVC], direction: direction, animated: true)
        context.coordinator.lastIndex = currentIndex
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        var parent: NonSwipePageView
        var lastIndex = 0
        
        init(parent: NonSwipePageView) {
            self.parent = parent
            self.lastIndex = parent.currentIndex
        }
        
        // 因为禁用了滑动，所以不需要提供前后页面
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { nil }
        func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { nil }
    }
}

使用方式：

// 先把所有子视图放到数组里
let contentViews = [
    PasswordCardView(tabIndex: $tabIndex, ...).padding(...),
    UserNameCardView(tabIndex: $tabIndex, ...).padding(...),
    // ... 其他子视图 ...
]

// 替换原TabView
NonSwipePageView(currentIndex: $tabIndex, contentViews: contentViews)

这个方法直接从底层禁用了滑动手势，完全避免了水平滑动切换的可能，适合需要彻底禁用的场景。

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