SwiftUI 中 NavigationLink 子地图视图如何回调选点坐标与对应行ID给根视图

问题根因 #

• 全局变量selectedLocation无实例隔离，多地图实例场景下会出现数据串扰
• 原代码将完成按钮放在根视图的List循环外层，闭包捕获的item是列表遍历完成后的最后一个元素，并非用户点击进入的导航页面对应的行元素，因此永远存在ID不匹配的问题
• 未建立「选中行ID」与「对应地图选点坐标」的一一绑定关系，完全依赖全局变量传递状态，违反单向数据流设计原则

正确实现步骤 #

1. 重构子视图层，移除全局变量 #

彻底删除全局的selectedLocation变量，将选点状态收敛到地图子视图内部，通过原生绑定和闭包实现回传，不再依赖delegate模式：

• 调整地图代表类MapViewRepresentable，通过@Binding把内部的长按选点结果暴露给上层视图
• 给地图承载页RowView增加固定的itemID属性（从根视图传入），搭配完成按钮的回调闭包，把选点坐标和对应ID一起传出

// 重构后的UIViewRepresentable地图视图
struct MapViewRepresentable: UIViewRepresentable {
    @Binding var selectedCoordinate: CLLocationCoordinate2D?
    
    func makeUIView(context: Context) -> MKMapView {
        let mapView = MKMapView(frame: .zero)
        mapView.delegate = context.coordinator
        // 初始化长按手势
        let longPress = UILongPressGestureRecognizer(
            target: context.coordinator,
            action: #selector(Coordinator.handleLongPress(_:))
        )
        longPress.minimumPressDuration = 1.0
        mapView.addGestureRecognizer(longPress)
        return mapView
    }
    
    func updateUIView(_ mapView: MKMapView, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, MKMapViewDelegate {
        var parent: MapViewRepresentable
        
        init(_ parent: MapViewRepresentable) {
            self.parent = parent
        }
        
        @objc func handleLongPress(_ gesture: UILongPressGestureRecognizer) {
            guard gesture.state == .began,
                  let mapView = gesture.view as? MKMapView else { return }
            // 清除旧标记
            mapView.removeAnnotations(mapView.annotations)
            // 换算手势落点为地理坐标
            let point = gesture.location(in: mapView)
            let coordinate = mapView.convert(point, toCoordinateFrom: mapView)
            // 添加新标记
            let annotation = MKPointAnnotation()
            annotation.coordinate = coordinate
            mapView.addAnnotation(annotation)
            // 直接回写到绑定的状态，无全局变量
            parent.selectedCoordinate = coordinate
        }
    }
}

// 重构后的地图承载视图
struct RowView: View {
    // 从根视图传入的当前行ID，无捕获错误问题
    let itemID: String
    // 内部持有选点坐标状态
    @State private var selectedCoordinate: CLLocationCoordinate2D?
    // 完成按钮的回调：把ID和坐标一起传回根视图
    let onComplete: (String, CLLocationCoordinate2D) -> Void
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        MapViewRepresentable(selectedCoordinate: $selectedCoordinate)
            .navigationBarTitleDisplayMode(.inline)
            // 完成按钮直接放在二级视图的导航栏上，不再放在根视图
            .navigationBarItems(trailing: Button {
                guard let coord = selectedCoordinate else { return }
                onComplete(itemID, coord)
                dismiss()
            } label: {
                Image(systemName: "paperplane.circle.fill")
                    .font(.title)
                    .foregroundColor(.green)
            })
    }
}

2. 调整根视图导航绑定 #

根视图的List循环中，每一行的NavigationLink直接把当前遍历的item.id传入对应RowView，在目的地初始化闭包中实现位置创建的逻辑，从根源上避免闭包捕获错误对象的问题：

struct RootView: View {
    @StateObject private var data = Model()
    
    var body: some View {
        NavigationView {
            List(data.entities) { item in
                NavigationLink {
                    RowView(
                        itemID: item.id,
                        onComplete: { id, coordinate in
                            // 此处拿到的ID永远与当前选中行匹配，坐标为对应地图页的选点结果
                            item.createLocation(id, coordinate)
                        }
                    )
                } label: {
                    Text("Select this row \(item.id)")
                }
            }
            .navigationTitle("Long press on the map to add a pin")
        }
    }
}

方案优势 #

• 完全移除全局变量，每个RowView实例独立持有自己的选点状态，多页面切换时不会出现数据串扰
• 完成按钮内置在二级视图层级中，不再跨层级放在根视图，不会出现导航栏按钮状态与当前页面不匹配的问题
• 采用SwiftUI原生的@Binding、闭包回调机制替代传统delegate模式，状态同步完全由系统驱动，不会出现状态不一致的问题
• 每个NavigationLink在目的地初始化时就完成ID绑定，彻底解决循环闭包捕获最后一个元素的经典问题

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