如何让SwiftUI的Map与MapAnnotation的onTap手势互不干扰？

问题场景 #

在SwiftUI中使用带有MapAnnotation的Map组件，需要实现两个交互逻辑：

• 点击Map空白区域：执行取消选中注释、关闭底部弹窗等操作
• 点击Map上的注释项：执行选中注释的对应逻辑

但实际测试发现，点击注释时，Map的onTap手势也会被触发，导致两个操作同时执行。

示例代码 #

import SwiftUI
import MapKit
import CoreLocation

struct AnnotationItem: Identifiable {
    let id = UUID()
    let name: String
    let location: CLLocation
    static let sample: [AnnotationItem] = [
        AnnotationItem(name: "Test", location: CLLocation(latitude: 47.333, longitude: 19.222))
    ]
}

struct ContentView: View {
    @State var region: MKCoordinateRegion =
        MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 47.333,
                                                          longitude: 19.222),
                           span: MKCoordinateSpan(latitudeDelta: 0.002, longitudeDelta: 0.002))

    var body: some View {
        Map(coordinateRegion: $region,
            annotationItems: AnnotationItem.sample) { annotation  in
                MapAnnotation(coordinate: annotation.location.coordinate) {
                    VStack {
                        Circle()
                            .foregroundColor(.red)
                            .frame(width: 50)
                        Text(annotation.name)
                    }
                    .onTapGesture {
                        print(">> tapped child")
                    }
                }
            }
        .onTapGesture {
            print(">> tapped parent")
        }
    }
}

当前问题表现 #

• 点击注释时，输出如下：

>> tapped parent
>> tapped child

• 点击Map空白区域时，输出如下：

>> tapped parent

已尝试的无效方法 #

• 通过布尔值控制Map的手势执行：只能延迟Map的操作，无法彻底取消
• 使用.exclusivelyBefore(:)修饰符绑定自定义手势：无效果

解决方案 #

方法一：提升注释手势的优先级 #

使用highPriorityGesture替代普通的onTapGesture，让注释的点击手势优先响应，阻止事件传递给父视图的Map：

Map(coordinateRegion: $region, annotationItems: AnnotationItem.sample) { annotation in
    MapAnnotation(coordinate: annotation.location.coordinate) {
        VStack {
            Circle()
                .foregroundColor(.red)
                .frame(width: 50)
            Text(annotation.name)
        }
        // 优先响应注释的点击手势
        .highPriorityGesture(
            TapGesture()
                .onEnded {
                    print(">> tapped child")
                }
        )
    }
}
.onTapGesture {
    print(">> tapped parent")
}

方法二：用Button包裹注释视图 #

Button组件默认会消耗点击事件，不会将事件向上传递给父视图，因此可以直接将注释视图作为Button的内容：

Map(coordinateRegion: $region, annotationItems: AnnotationItem.sample) { annotation in
    MapAnnotation(coordinate: annotation.location.coordinate) {
        Button(action: {
            print(">> tapped child")
        }) {
            VStack {
                Circle()
                    .foregroundColor(.red)
                    .frame(width: 50)
                Text(annotation.name)
            }
        }
        // 移除Button默认的高亮样式（可选）
        .buttonStyle(.plain)
    }
}
.onTapGesture {
    print(">> tapped parent")
}

修改后，点击注释只会触发注释的操作，点击Map空白区域则正常执行Map的手势逻辑。

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