TabView内List的onDelete内置滑动删除手势冲突问题求助

问题场景 #

现有一个包含两个页面的TabView，使用.page(indexDisplayMode: .never)样式实现无底部Tab栏的滑动切换；每个页面内的List支持左滑行删除操作，但TabView的翻页手势与List的删除手势发生冲突，导致几乎无法触发删除操作。

复现代码 #

TabView结构代码

enum TabItems {
    case home
    case statistics
}

struct ContentView: View {
    @State var selectedTab: TabItems = .home

    var body: some View {
        TabView(selection: $selectedTab) {
            Home()
            Statistics()
        }
        .tabViewStyle(.page(indexDisplayMode: .never))
    }
}

页面视图代码

struct Home: View {
    @State var numbers: [Int] = [1, 2, 3, 4, 5]
    
    var body: some View {
        VStack {
            List {
                ForEach(numbers, id: \.self) { number in
                    Text("Number: \(number)")
                }
                .onDelete(perform: { indexSet in
                    numbers.remove(atOffsets: indexSet)
                })
            }
        }
    }
}

struct Statistics: View {
    @State var numbers: [Int] = [1, 2, 3, 4, 5, 6, 7]
    
    var body: some View {
        VStack {
            List {
                ForEach(numbers, id: \.self) { number in
                    Text("\(number)")
                }
                .onDelete(perform: { indexSet in
                    numbers.remove(atOffsets: indexSet)
                })
            }
        }
    }
}

冲突演示 #

解决方案 #

通过给List的每行添加高优先级拖动手势，让行内的滑动手势优先级高于TabView的翻页手势，从而优先触发删除操作。

修改后的页面视图代码如下（以Home为例，Statistics同理）：

struct Home: View {
    @State var numbers: [Int] = [1, 2, 3, 4, 5]
    
    var body: some View {
        VStack {
            List {
                ForEach(numbers, id: \.self) { number in
                    Text("Number: \(number)")
                        // 添加高优先级拖动手势，抢占TabView的手势识别权
                        .highPriorityGesture(
                            DragGesture(minimumDistance: 10, coordinateSpace: .local)
                        )
                }
                .onDelete(perform: { indexSet in
                    numbers.remove(atOffsets: indexSet)
                })
            }
        }
    }
}

原理说明 #

.highPriorityGesture修饰符会提升手势的优先级，当用户在列表行上滑动时，系统会优先识别行内的拖动手势，进而触发List内置的左滑删除逻辑，避免与TabView的翻页手势冲突。

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