SwiftUI中如何让拖拽手势优先于ScrollView的默认滚动？

问题描述 #

开发SwiftUI视图时，在带多个项目的水平ScrollView中添加了可拖拽子视图，要求子视图的拖拽手势始终优先于ScrollView的默认滚动行为。但目前存在问题：首次拖拽手势正常工作，释放后再次拖拽时，ScrollView会拦截手势，导致视图滚动而非子视图被拖拽。

已尝试无效的方法 #

• 使用.highPriorityGesture设置拖拽手势优先级，未解决问题；
• 尝试用.simultaneousGesture协调手势，无效；
• 拖拽时给ScrollView添加.disabled，但同时禁用了拖拽手势本身。

原代码示例 #

struct DragViewInsideScrollView: View {
    
    @State private var dragOffset: CGFloat = .zero
    @State private var isDragging: Bool = false
    
    var body: some View {
        VStack {
            HStack {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack {
                        ForEach(0..<10) { _ in
                            RoundedRectangle(cornerRadius: 8)
                                .fill(Color.gray.opacity(0.5))
                                .frame(width: 120, height: 80)
                                .disabled(isDragging)
                        }
                    }
                    .overlay(alignment: .leading) {
                            Rectangle()
                                .offset(x: dragOffset)
                                .frame(width: 120, height: 60)
                                .gesture(
                                    DragGesture(minimumDistance: 0, coordinateSpace: .local)
                                        .onChanged({ newValue in
                                            isDragging = true
                                            dragOffset = newValue.translation.width
                                            print("New Value = \(newValue)")
                                        })
                                        .onEnded({ endValue in
                                            isDragging = false
                                        })
                                    , including: .all)
                        // 注释的尝试代码
//                                .highPriorityGesture(
//                                    DragGesture(minimumDistance: 0, coordinateSpace: .global)
//                                        .onChanged({ newValue in
//                                            isDragging = true
//                                            dragOffset = newValue.translation.width
//                                        })
//                                        .onEnded({ endValue in
//                                            isDragging = false
//                                        })
//                                )
//                            .gesture(
//                                DragGesture(minimumDistance: 0)
//                                    .onChanged({ newValue in
//                                        dragOffset = newValue.translation.width
//                                    })
//                            )
                    }
                }
                .gesture( // Prevent ScrollView's gesture from interfering
                    isDragging
                        ? DragGesture().onChanged { _ in }.onEnded { _ in }
                        : nil
                )
            }
        }
    }
}

问题演示 #

解决方案 #

核心是确保拖拽子视图的手势始终拥有最高优先级，同时在拖拽过程中阻止ScrollView的滚动手势响应。修改后的代码如下：

struct DragViewInsideScrollView: View {
    @State private var dragOffset: CGFloat = .zero
    @State private var isDragging: Bool = false
    
    var body: some View {
        VStack {
            HStack {
                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 16) {
                        ForEach(0..<10) { _ in
                            RoundedRectangle(cornerRadius: 8)
                                .fill(Color.gray.opacity(0.5))
                                .frame(width: 120, height: 80)
                                .disabled(isDragging)
                        }
                    }
                    .padding(.horizontal)
                    .overlay(alignment: .leading) {
                        Rectangle()
                            .fill(Color.blue)
                            .offset(x: dragOffset)
                            .frame(width: 120, height: 60)
                            // 高优先级手势，确保优先响应
                            .highPriorityGesture(
                                DragGesture(minimumDistance: 0, coordinateSpace: .local)
                                    .onChanged { value in
                                        isDragging = true
                                        dragOffset = value.translation.width
                                    }
                                    .onEnded { _ in
                                        isDragging = false
                                        // 可选：添加拖拽结束后的复位逻辑
                                        // dragOffset = .zero
                                    }
                            )
                    }
                }
                // 拖拽时消耗ScrollView手势，阻止滚动
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .onChanged { _ in }
                        .onEnded { _ in }
                , including: isDragging ? .all : .subviews)
            }
        }
    }
}

关键修改说明 #

1. 高优先级手势：给拖拽子视图添加.highPriorityGesture，确保其手势识别优先级始终高于ScrollView的滚动手势，避免后续拖拽被ScrollView拦截。
2. ScrollView手势控制：在ScrollView上添加空的拖拽手势，通过including参数动态控制手势响应范围：
   • 当isDragging为true时，设置including: .all，让空手势消耗掉ScrollView的滚动触发条件，阻止滚动；
   • 当isDragging为false时，设置including: .subviews，ScrollView可正常响应滚动手势。
3. 元素禁用：保留对ScrollView内其他元素的.disabled(isDragging)设置，避免拖拽过程中误触干扰。

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