SwiftUI doesn’t provide a UISearchBar, and while we can implement SeachBar ourselves by using TextField, it’s not easy to implement the same controls as UISearchBar, especially the clear button and search icon.

It is recommended here to use the UISearchBar and UIViewRepresentable protocols directly to create a SearchBar.

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

struct SearchBar: UIViewRepresentable {

    @Binding var text: String
    var placeholder: String
    
    var onCommit: ((_ text: String) - >Void)?

    func makeUIView(context: UIViewRepresentableContext<SearchBar>) -> UISearchBar {
        let searchBar = UISearchBar(frame: .zero)
        searchBar.delegate = context.coordinator

        searchBar.placeholder = placeholder
        searchBar.autocapitalizationType = .none
        searchBar.searchBarStyle = .minimal
        return searchBar
    }

    func updateUIView(_ uiView: UISearchBar.context: UIViewRepresentableContext<SearchBar>) {
        uiView.text = text
    }

    func makeCoordinator(a) -> SearchBar.Coordinator {
        return Coordinator(text: $text, onCommit: self.onCommit)
    }

    class Coordinator: NSObject.UISearchBarDelegate {

        @Binding var text: String
        var onCommit: ((_ text: String) - >Void)?

        init(text: Binding<String>, onCommit: ((_ text: String) - >Void)?) {
            _text = text
            self.onCommit = onCommit
        }

        func searchBar(_ searchBar: UISearchBar.textDidChange searchText: String) {
            text = searchText
        }
        
        func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
            if let onCommit = self.onCommit {
                onCommit(searchBar.text ?? "")}}}}Copy the code

UIViewRepresentable is the protocol provided in the SwiftUI framework for converting UIView into View within SwiftUI.

Func makeUIView(context: self. context) -> self. UIViewType The method used to create the View that classes that comply with the UIViewRepresentable protocol must implement. Its return value is an instance of UIView class. This method is called only once when the View is created, and the following method is called when the View needs to be updated.

Func updateUIView(_ uiView: self.uiViewType, context: self.context) This method is called to update the state of the uiView whenever any event occurs that requires updating the state of the View.

Func makeCoordinator() -> self. Coordinator Requires an instance of a Coordinator as the return value. It is usually used to handle events (click, time, delegate, notification) that cause a change in the state of a UIView and reflect the new state to the View.

Go to the official account [iOS Development Stack] to learn more SwiftUI, iOS development related content.

This article was first published in my blog, and there are more related articles about SwiftUI: SwiftUI add extension to Color support hex string Learning SwiftUI, must master the three knowledge points SwiftUI custom Modifier