SwiftUI矩形拖拽追踪手势响应不稳定问题咨询

问题场景 #

我需要实现一个被矩形包围的10×10网格的单元格组选功能，在矩形内追踪指针拖拽，计算经过的单元格坐标。使用MacBook Pro + Xcode 15.1 + Swift 5.9 + iPhone 15 Pro模拟器测试时，遇到DragGesture响应不稳定的问题：第一次拖拽启动后能持续追踪到松开，但再次启动时经常不响应，只有靠近矩形边框启动时触发概率较高。

原代码如下：

struct ContentView: View {
    var cellSize: Double = 30.0
    
    var body: some View {
        ZStack(){
            Rectangle()
                .stroke(.red, lineWidth: 6)
                .fill(.clear)
                .frame(width: 10 * cellSize, height: 10 * cellSize)
                .gesture(DragGesture(minimumDistance: 2,
                                     coordinateSpace: .local)
                    .onChanged() { drag in
                        print("Drag: raw: \(drag.location); Cell: \(Int(drag.location.y/cellSize)), \(Int(drag.location.x/cellSize))")
                    }
                    .onEnded() { drag in
                        print("DragEnd: \(drag.location)")
                    }
                )
        }
    }
}

问题原因 #

1. minimumDistance: 2限制：这个参数要求拖拽移动至少2个点才会触发手势，当点击后立刻拖拽（尤其是初始移动距离不足2点时），手势不会响应；边框附近因为stroke有宽度，初始移动更容易达到距离阈值，所以触发概率更高。
2. 点击区域仅为边框：矩形设置了.fill(.clear)，默认的可交互区域只有stroke的边框部分，内部空白区域无法正确识别点击拖拽操作。

修复方案 #

• 移除minimumDistance参数（默认值为0，点击后立刻响应拖拽）
• 添加contentShape(Rectangle())，将整个矩形区域设为可交互区域
• 可选：添加.highPriorityGesture()确保手势优先响应（避免父视图干扰）

修改后的代码：

struct ContentView: View {
    var cellSize: Double = 30.0
    
    var body: some View {
        ZStack(){
            Rectangle()
                .stroke(.red, lineWidth: 6)
                .fill(.clear)
                .frame(width: 10 * cellSize, height: 10 * cellSize)
                .contentShape(Rectangle()) // 确保整个矩形区域可交互
                .highPriorityGesture( // 优先响应此手势
                    DragGesture(coordinateSpace: .local)
                        .onChanged { drag in
                            let cellX = Int(drag.location.x / cellSize)
                            let cellY = Int(drag.location.y / cellSize)
                            print("Drag: raw: \(drag.location); Cell: \(cellY), \(cellX)")
                        }
                        .onEnded { drag in
                            print("DragEnd: \(drag.location)")
                        }
                )
        }
    }
}

效果验证 #

修改后，点击矩形内任意位置拖拽都能稳定响应，每次按下触控板都会立刻开始追踪，抬起时正常结束，不会出现之前的响应不稳定问题。

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