SwiftUI中如何让DragGesture从Button上方触发拖动操作？

问题原因 #

SwiftUI 中系统组件自带的手势默认优先级高于开发者手动添加的同层级手势，因此 Button 的点击手势会拦截触摸事件，导致附加在 Button 上的 DragGesture 无法响应 Button 区域内的拖动操作。

解决方案 #

通过 simultaneousGesture 修饰符让两个手势支持同时识别，再结合拖动距离阈值判断实现预期逻辑：拖动距离超过阈值时触发拖动操作，未超过阈值抬手时触发 Button 点击逻辑。
完整可运行代码如下：

struct ContentView: View {
    
    @State private var dragOffset: CGSize = .zero
    @State private var dragStartOffset: CGSize? = nil
    // 标记是否触发了拖动，用于区分点击和拖动操作
    @State private var isDragging = false
    // 拖动触发阈值，移动距离超过该值才判定为拖动，避免点击误触发
    private let dragThreshold: CGFloat = 10
    
    var body: some View {
        ZStack {
             Button("Hello") {
                 // 仅未触发拖动时执行点击逻辑
                 guard !isDragging else { return }
                 print("hello")
             }
             .padding(30)
             .background(.regularMaterial)
             // simultaneousGesture允许拖动手势与Button点击手势同时识别
             .simultaneousGesture(dragGesture)
             .offset(dragOffset)
        }
    }
    
    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: dragThreshold, coordinateSpace: .global)
            .onChanged { value in
                isDragging = true
                if dragStartOffset == nil {
                    dragStartOffset = dragOffset
                }
                dragOffset = dragStartOffset! + value.translation
            }
            .onEnded { _ in
                dragStartOffset = nil
                // 延迟重置拖动状态，避免手势结束时序问题导致点击逻辑误触发
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                    isDragging = false
                }
            }
    }
}

func +(a: CGSize, b: CGSize) -> CGSize { CGSize(width: a.width + b.width, height: a.height + b.height) }

实现说明 #

• 用 simultaneousGesture 替代原来的 gesture 修饰符，确保拖动手势和 Button 自带的点击手势可以同时接收触摸事件，不会出现一方拦截另一方的问题
• 设置拖动阈值 dragThreshold 为10pt，只有手指移动距离超过这个值才会判定为拖动操作，避免正常的点击操作被误识别为拖动
• 新增 isDragging 状态标记区分最终触发的操作类型：如果触发了拖动，Button 的点击逻辑会被自动屏蔽；如果只是轻触后抬手，就会正常执行点击逻辑
• 拖动结束后延迟0.1秒重置 isDragging 状态，避免手势结束的时序问题导致点击逻辑被误触发

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