SwiftUI中垂直ScrollView的垂直拖拽手势检测问题

要实现不干扰下层ScrollView滚动、自身又能检测垂直拖拽手势的覆盖层，直接用SwiftUI原生DragGesture加allowsHitTesting很难满足需求，因为原生手势默认会抢占触摸事件。这里提供两种可靠的解决思路：

方法一：基于UIKit手势识别器封装（推荐） #

利用UIKit手势的cancelsTouchesInView属性，让覆盖层的手势不会阻断下层视图的触摸事件，同时自身能正常检测拖拽。

1. 创建自定义覆盖层视图 #

struct DragDetectionOverlay: UIViewRepresentable {
    var onDragChanged: (CGPoint) -> Void
    var onDragEnded: () -> Void
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.backgroundColor = .clear // 透明不遮挡下层内容
        
        let panGesture = UIPanGestureRecognizer(
            target: context.coordinator,
            action: #selector(Coordinator.handlePan(_:))
        )
        // 核心设置：不取消下层视图的触摸事件
        panGesture.cancelsTouchesInView = false
        view.addGestureRecognizer(panGesture)
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
    
    class Coordinator: NSObject {
        private let onDragChanged: (CGPoint) -> Void
        private let onDragEnded: () -> Void
        
        init(onDragChanged: @escaping (CGPoint) -> Void, onDragEnded: @escaping () -> Void) {
            self.onDragChanged = onDragChanged
            self.onDragEnded = onDragEnded
        }
        
        @objc func handlePan(_ gesture: UIPanGestureRecognizer) {
            switch gesture.state {
            case .changed:
                let translation = gesture.translation(in: gesture.view)
                onDragChanged(translation)
            case .ended, .cancelled:
                onDragEnded()
            default: break
            }
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(onDragChanged: onDragChanged, onDragEnded: onDragEnded)
    }
}

2. 在界面中使用覆盖层 #

将覆盖层与ScrollView放在ZStack中，确保覆盖层在顶层但不阻断ScrollView的滚动：

struct ContentView: View {
    @State private var currentDragTranslation = CGPoint.zero
    
    var body: some View {
        ZStack {
            // 下层的垂直ScrollView
            ScrollView {
                VStack(spacing: 20) {
                    ForEach(0..<20) { index in
                        Text("列表项 \(index + 1)")
                            .font(.title)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(8)
                    }
                }
                .padding()
            }
            
            // 顶层的拖拽检测覆盖层
            DragDetectionOverlay(
                onDragChanged: { translation in
                    currentDragTranslation = translation
                    print("拖拽偏移：\(translation.y)")
                },
                onDragEnded: {
                    print("拖拽结束")
                }
            )
            .allowsHitTesting(true) // 允许覆盖层接收手势
        }
    }
}

方法二：SwiftUI原生手势（有限场景可用） #

如果你的拖拽逻辑不需要太复杂，可以尝试用simultaneousGesture让ScrollView和自定义手势同时响应，但注意ScrollView的滚动手势优先级更高，部分场景下自定义手势可能响应不灵敏：

ScrollView {
    // 你的列表内容
}
.simultaneousGesture(
    DragGesture()
        .onChanged { value in
            print("拖拽偏移：\(value.translation.y)")
        }
        .onEnded { _ in
            print("拖拽结束")
        }
)

原理说明 #

• UIKit方法的核心是cancelsTouchesInView = false，这个设置会让覆盖层的手势识别器在检测到拖拽时，不会把触摸事件从下层ScrollView中移除，两者可以同时处理事件。
• SwiftUI原生手势默认会抢占事件，simultaneousGesture是强制让多个手势同时响应，但受限于SwiftUI的手势优先级机制，在快速滚动等场景下可能不如UIKit方法稳定。

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