SwiftUI Map标注自定义手势仅生效一次问题排查与解决

当liftOff设为40.0后，拖拽操作会让Image通过offset偏移出GeometryReader的30x30范围。SwiftUI的手势识别依赖视图的命中测试（Hit Test）区域，只有当点击位置落在视图自身或父视图的可命中区域内时，自定义手势才会触发。一旦Image完全离开GeometryReader的范围，点击Image的区域会被下方的Map捕获，导致自定义手势失效——只有两者重叠的区域属于GeometryReader的命中范围，所以此时只有点击重叠部分才会生效。

方案1：扩展父视图的命中测试区域 #

使用.contentShape()方法，让GeometryReader的可命中区域覆盖Image偏移后的所有可能位置，确保点击Image时始终能触发自定义手势：

var body: some View {
    GeometryReader { geo in
        let frameInGlobal = geo.frame(in: .global)
        Image("PinRed")
            .background(Color.green)
            .offset(CGSize(width: dragAmount.width, height: dragAmount.height - liftOff))
            .defersSystemGestures(on: .all)
            .onTapGesture {
                print("Global center: \(frameInGlobal.midX) x \(frameInGlobal.midY)")
            }
            .gesture(drag(frameInGlobal: frameInGlobal))
            .simultaneousGesture(
                LongPressGesture(minimumDuration: 0.2)
                    .onEnded { _ in
                        liftOff = 40.0
                    }
            )
    }
    .frame(width: 30, height: 30)
    .background(Color.red)
    // 扩展命中区域，这里的-50可根据liftOff和拖拽范围调整，确保覆盖偏移后的Image
    .contentShape(Rectangle().inset(by: -50))
}

方案2：用大尺寸透明容器包裹 #

通过ZStack添加一个足够大的透明容器，让它的命中区域覆盖Image的所有可能位置，手势会附着在这个容器上：

var body: some View {
    ZStack {
        // 透明占位容器，提供足够大的命中区域
        Color.clear.frame(width: 120, height: 120)
        GeometryReader { geo in
            let frameInGlobal = geo.frame(in: .global)
            Image("PinRed")
                .background(Color.green)
                .offset(CGSize(width: dragAmount.width, height: dragAmount.height - liftOff))
                .defersSystemGestures(on: .all)
                .onTapGesture {
                    print("Global center: \(frameInGlobal.midX) x \(frameInGlobal.midY)")
                }
                .gesture(drag(frameInGlobal: frameInGlobal))
                .simultaneousGesture(
                    LongPressGesture(minimumDuration: 0.2)
                        .onEnded { _ in
                            liftOff = 40.0
                        }
                )
        }
        .frame(width: 30, height: 30)
        .background(Color.red)
    }
    .contentShape(Rectangle())
}

方案3：优化手势组合逻辑 #

将长按和拖拽手势合并为序列手势，避免simultaneousGesture带来的潜在冲突，逻辑更清晰：

// 替换原有的gesture和simultaneousGesture部分
.gesture(
    LongPressGesture(minimumDuration: 0.2)
        .onEnded { _ in
            liftOff = 40.0
        }
        .sequenced(before: DragGesture())
        .updating($dragAmount) { value, state, _ in
            switch value {
            case .second(true, let drag):
                state = drag?.translation ?? .zero
            default:
                break
            }
        }
)

这样长按结束后直接进入拖拽状态，无需单独处理两个手势的同时触发问题。

内容的提问来源于stack exchange，提问作者Reinhard Männer