如何使 SwiftUi 中的按钮触发 UIKit 包装器中的函数？

Question

我可以通过长按手势将 MKPointAnnotations 添加到我的 Mapkit MapView。

现在我想通过按 Swift UI 中的按钮来删除这些标记。

我的想法是在按下按钮时设置一个变量 true 并使用该变量作为 updateUIView 函数中函数的条件。但我收到错误消息，指出我无法在此嵌套函数中引用此变量。

这是我的 addAnnotations 包装器中的一个片段。效果很好。如何在我的mapView上实现removeAnnotation函数？

func makeUIView(context: Context) -> MKMapView {
        let map = MKMapView()
        map.setRegion(region, animated: false)
        map.showsUserLocation = true
    
    map.delegate = context.coordinator
    locationManager.delegate = context.coordinator
    
    
    let longPress = UILongPressGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.addAnnotation(gesture:)))
    longPress.minimumPressDuration = 1
    map.addGestureRecognizer(longPress)
    
    
    return map
}


class Coordinator: NSObject, MKMapViewDelegate, CLLocationManagerDelegate {
    
    var mapView: MapView
    init(mapView: MapView) {            
        self.mapView = mapView      
    }
     
    @objc func addAnnotation(gesture: UIGestureRecognizer) {
        
        if gesture.state == .ended {
            
            
            if let mapView = gesture.view as? MKMapView {
                let point = gesture.location(in: mapView)
                let locationCoordinate = mapView.convert(point, toCoordinateFrom: mapView)
                let myPin = MKPointAnnotation()
                myPin.title = "Latitude: \(locationCoordinate.latitude), Longitude: \(locationCoordinate.longitude)"
                myPin.coordinate = locationCoordinate
                mapView.addAnnotation(myPin)
            }
        }
    }

          

Answer 1

首先，我不知道为什么你选择在 SwiftUI 项目中使用 MapKit 和 UIKit，我假设，除非你打算支持 iOS 13，否则你可以在 SwiftUI 中完成这一切，但无论如何，这就是你如何做到这一点：

你有你的导入当然：

import SwiftUI
import CoreLocation
import MapKit

然后像这样创建一个viewModel：

class MapViewModel: ObservableObject {
    
    @Published var didPressButton = false
    
}

添加一个@StateObject属性包装器（如果您在ContentView中创建实例，请避免使用@ObservedObject）

是的，您也可以使用@EnvironmentObject

struct ContentView: View {
    
    @StateObject var viewModel = MapViewModel()
    
    var body: some View {
        ZStack {
            MapView(viewModel: viewModel)
            Button("Perform Action") {
            
                viewModel.didPressButton.toggle()
            }
        }
    }
}

然后创建一个@ObservableObject 它将与 ContentView 共享 MapViewModel 的相同实例

struct MapView: UIViewRepresentable {

    @ObservableObject var viewModel: MapViewModel

    func makeCoordinator() -> Coordinator {
        return Coordinator()
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        if viewModel.didPressButton == true {
            context.coordinator.performActionFromSwiftUI()
        }
    }
    
    func makeUIView(context: Context) -> MKMapView {
        let map = context.coordinator.mapView
        map.setRegion(region, animated: false)
        map.showsUserLocation = true
        
        map.delegate = context.coordinator
        locationManager.delegate = context.coordinator
        
        
        let longPress = UILongPressGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.addAnnotation(gesture:)))
        longPress.minimumPressDuration = 1
        map.addGestureRecognizer(longPress)
        
        
        return map
    }
    
}

在 Coordinator 类中，添加将在 UIViewRepresentable updateUIView 方法中调用的函数。

• 我还建议在 UIViewRepresentable 结构中的 makeUIView 方法中返回 mapView 时，返回 context.coordinator.mapView 而不是在那里创建实例。

class Coordinator: NSObject, MKMapViewDelegate, CLLocationManagerDelegate {
    
    var mapView = MKMapView()
    
    
    func performActionFromSwiftUI() {
        
        print("tapped")
    }
    
    @objc func addAnnotation(gesture: UIGestureRecognizer) {
        
        if gesture.state == .ended {
            
            
            if let mapView = gesture.view as? MKMapView {
                let point = gesture.location(in: mapView)
                let locationCoordinate = mapView.convert(point, toCoordinateFrom: mapView)
                let myPin = MKPointAnnotation()
                myPin.title = "Latitude: \(locationCoordinate.latitude), Longitude: \(locationCoordinate.longitude)"
                myPin.coordinate = locationCoordinate
                mapView.addAnnotation(myPin)
            }
        }
    }
}