Swiftui with delegate functions for mkmapview and uitextfield

Question

I'm practicing and reading up on SwiftUI and I am starting off by making a simple app where you can type a location into a TextField View from swiftUI and then on enter the mkmapview within SwiftUI again will go to that location that I searched for. I can't for the life of me seem to grasp how to get this functionality setup with my mkmapview.

Additionally I can't even find a way to dismiss the keyboard from Textfield without doing a navigation or rendering a new view or removing a view.

Can anyone point to me how I can dismiss my keyboard? I'm used to resignFirstResponder() or didFinishEditing().
Also, does anyone have any suggestions on how to assign functionality to the MKMapView from swiftUI or am I looking at this all wrong?

I figured in my Textfield's onCommit handler I would call a function that could pass necessary data to MapView and handle that but I haven't been able to find a good way to do it.

struct MainView : View {

    @State var text: String = ""

    var body: some View {
        VStack {
            MapView()
                .frame(height: UIScreen.main.bounds.height)
                .offset(y: 50)
                //.edgesIgnoringSafeArea(.top)

            SearchField(text: "")
                .offset(y: -(UIScreen.main.bounds.height) + 60)
                .padding()
        }
    }
}

struct MapView : UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct SearchField : View {
    @State var text: String
    @State var showDetails: Bool = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 30).frame(width: 300, height: 40)
                .foregroundColor(.white)
                .offset(y: 55)
            TextField($text, placeholder: Text("City, State, or Address"), onEditingChanged: { body in
                print(body)

            }, onCommit: {
                print(self.text)
            })
                .padding()
                .offset(x: 50)
        }
    }
}

*Edit Note: my code above works, it will build a full screen map view with a text field on it and the text field takes text and will update it's state. My question is about moving forward from this with getting functionality to mapview and hiding my damn keyboard on return

Answer 1

Okay guys,

So from what I have seen so far keyboards will only dismiss on some ui change but I found a pretty elegant solution!

By using a Binding declaration for a boolean "didEnter" which I can pass between views, when the user hit's return on the keyboard the onCommit() function is called within the TextField view. So I added a toggle for onCommit that actually switches my TextField view to a Text view that displays the text simulating the same look, then after some task is completed I toggle didEnter again which switches back to the TextField.

Still feels like a workaround but works for now.

struct InputView : View {
    @Binding var text:          String
    @Binding var didEnter:      Bool
    @State   var searchType:    SearchType

    var body: some View {
        ZStack{
            RoundedRectangle(cornerRadius: 15).frame(width: 310, height: 100)
                .foregroundColor(.secondary)
                .offset(y: -20)
            ZStack{
                RoundedRectangle(cornerRadius: 30).frame(width: 290, height: 40)
                    .foregroundColor(.white)
                if(!didEnter){
                    TextField($text, placeholder: Text("City, State, Address")) {
                        print(self.text)
                        self.didEnter.toggle()
                    }
                        .frame(width: 220, height: 40, alignment: .leading)
                        .offset(x: -20)
                }
                else{
                    Text(self.text).frame(width: 220, height: 40, alignment: .leading)
                        .offset(x: -20)
                }
                Text("Select Location:").bold().fontWeight(.medium)
                    .offset(y: -40)
                    .foregroundColor(.white)
            }
        }
    }
}