Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swiftui with delegate functions for mkmapview and uitextfield

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

like image 523
nikoclicks Avatar asked Jun 06 '19 04:06

nikoclicks


1 Answers

To dismiss the keyboard when pressing return button in TextField, you can use:

UIApplication.shared.keyWindow?.endEditing(true)

Calling it on TextField's onCommit method:

TextField($searchString, placeholder: Text("Search...")) {
     UIApplication.shared.keyWindow?.endEditing(true)
   }
   .font(.system(size: 23))
   .padding()
like image 91
Sereysophea Eap Avatar answered Nov 13 '22 04:11

Sereysophea Eap