SwiftUI：解决TabView拖拽手势与侧边菜单的冲突问题

核心问题分析 #

TabView的内置拖拽手势优先级高于外层自定义手势，导致最左侧Tab的向右拖拽被TabView捕获，无法触发侧边菜单呼出。我们需要实现条件化手势拦截：仅在最左侧Tab时，让侧边栏手势优先响应向右拖拽，其他Tab保持正常切换逻辑。

完整实现代码 #

import SwiftUI

struct SideMenu: View {
    var body: some View {
        ZStack {
            Color.gray
            Text("Side Menu")
        }
    }
}

struct MainView: View {
    @Binding var selection: Int
    let disableRightSwipe: Bool
    
    var body: some View {
        TabView(selection: $selection) {
            // 最左侧Tab：添加高优先级手势拦截向右拖拽
            ZStack {
                Color.blue
                Text("tab 0")
            }
            .tag(0)
            .highPriorityGesture(
                disableRightSwipe ? DragGesture(minimumDistance: 10)
                    .onChanged { _ in } : nil
            )
            
            ZStack {
                Color.red
                Text("tab 1")
            }.tag(1)
            
            ZStack {
                Color.green
                Text("tab 2")
            }.tag(2)
        }
        .tabViewStyle(.page)
        .indexViewStyle(.page(backgroundDisplayMode: .never))
    }
}

struct FeedBaseView: View {
    @State var showMenu: Bool = false
    @State var offset: CGFloat = 0
    @State var lastStoredOffset: CGFloat = 0
    @GestureState var gestureOffset: CGFloat = 0
    @State var tabSelection: Int = 0
    
    var body: some View {
        let sideBarWidth = widthOrHeight(width: true) - 90
        let isLeftmostTab = tabSelection == 0
        
        VStack {
            HStack(spacing: 0) {
                SideMenu().frame(width: sideBarWidth)
                
                VStack(spacing: 0) {
                    MainView(
                        selection: $tabSelection,
                        disableRightSwipe: isLeftmostTab && !showMenu
                    )
                }
                .blur(radius: showMenu ? 10 : 0)
                .frame(width: widthOrHeight(width: true))
                .overlay(
                    Rectangle()
                        .fill(Color.primary.opacity( (offset / sideBarWidth) / 6.0 ))
                        .ignoresSafeArea(.container, edges: .all)
                        .onTapGesture {
                            if showMenu {
                                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                                showMenu = false
                            }
                        }
                )
            }
            .frame(width: sideBarWidth + widthOrHeight(width: true))
            .offset(x: -sideBarWidth / 2)
            .offset(x: offset)
            .gesture(
                DragGesture()
                    .updating($gestureOffset) { value, out, _ in
                        out = value.translation.width
                    }
                    .onChanged { value in
                        if abs(value.translation.height) > 10 && !showMenu {
                            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                        }
                    }
                    .onEnded(onEnd(value:))
            )
        }
        .animation(.linear(duration: 0.15), value: offset == 0)
        .onChange(of: showMenu) { newValue in
            if newValue {
                if offset == 0 {
                    offset = sideBarWidth
                    lastStoredOffset = offset
                }
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            } else if offset == sideBarWidth {
                offset = 0
                lastStoredOffset = 0
            }
        }
        .onChange(of: gestureOffset) { _ in
            guard isLeftmostTab || showMenu else { return }
            
            if showMenu {
                if gestureOffset < 0 {
                    let calculatedOffset = lastStoredOffset + gestureOffset
                    offset = max(min(calculatedOffset, sideBarWidth), 0)
                }
            } else {
                let calculatedOffset = lastStoredOffset + gestureOffset
                offset = max(min(calculatedOffset, sideBarWidth), 0)
            }
        }
    }
    
    func onEnd(value: DragGesture.Value) {
        let sideBarWidth = widthOrHeight(width: true) - 90
        let isLeftmostTab = tabSelection == 0
        
        withAnimation(.spring(duration: 0.15)) {
            if value.translation.width > 0 {
                guard isLeftmostTab else {
                    offset = 0
                    return
                }
                
                if value.translation.width > sideBarWidth / 2 || value.velocity.width > 800 {
                    offset = sideBarWidth
                    lastStoredOffset = sideBarWidth
                    if !showMenu {
                        UIImpactFeedbackGenerator(style: .medium).impactOccurred()
                    }
                    showMenu = true
                } else if !showMenu {
                    offset = 0
                }
            } else {
                if -value.translation.width > sideBarWidth / 2 || -value.velocity.width > 800 {
                    offset = 0
                    if showMenu {
                        UIImpactFeedbackGenerator(style: .light).impactOccurred()
                    }
                    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    showMenu = false
                } else if showMenu {
                    offset = sideBarWidth
                }
            }
        }
        lastStoredOffset = offset
    }
}

func widthOrHeight(width: Bool) -> CGFloat {
    let scenes = UIApplication.shared.connectedScenes
    let windowScene = scenes.first as? UIWindowScene
    let window = windowScene?.windows.first
    
    return width ? (window?.screen.bounds.width ?? 0) : (window?.screen.bounds.height ?? 0)
}

struct FeedBaseView_Previews: PreviewProvider {
    static var previews: some View {
        FeedBaseView()
    }
}

关键修改说明 #

1. 共享Tab选中状态：将Tab的选中状态从MainView提升到FeedBaseView，让父视图能实时感知当前Tab位置。
2. 条件化手势拦截：在最左侧Tab添加highPriorityGesture，仅当处于最左侧Tab且侧边栏未展开时，拦截向右拖拽手势，阻止TabView响应。
3. 手势响应逻辑优化：外层拖拽手势仅在最左侧Tab或侧边栏已展开时处理偏移，避免干扰其他Tab的正常切换。
4. 代码精简：合并重复的偏移计算逻辑，提升代码可读性。

最终效果 #

• 最左侧Tab：向右拖拽呼出侧边栏，向左拖拽正常切换到下一个Tab
• 中间/右侧Tab：左右拖拽正常切换Tab，不会触发侧边栏
• 侧边栏展开后：向左拖拽可收起侧边栏，不受Tab选中状态影响

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