SwiftUI -单击cancel时执行操作- .searchable函数

Question

使用.searchable(text: $text)函数时，搜索时将在搜索栏中显示一个取消按钮。

单击“取消”按钮时是否有执行操作的方法？当单击cancel时，我想调用一个函数，但是当单击cancel时，我想不出如何执行一个操作。

苹果文档没有提到这方面的任何事情。回到UIKit，func searchBarCancelButtonClicked(searchBar: UISearchBar) {就能做到这一点。

下面是我指的“取消”按钮的图片：

​

Answer 1

您可以使用isSearching环境值(6)查看是否正在执行搜索。若要在取消时执行操作，可以使用true监视从false到onChange的更改。

struct ContentView: View {
    @State private var searchText = ""
    @Environment(\.dismissSearch) var dismissSearch
    
    var body: some View {
        NavigationView {
            VStack {
                ChildView()
                Text("Searching for \(searchText)")
                
            }
            
            .searchable(text: $searchText)
            .navigationTitle("Searchable Example")
        }
    }
}

struct ChildView : View {
    @Environment(\.isSearching) var isSearching
    
    var body: some View {
        Text("Child")
            .onChange(of: isSearching) { newValue in
                if !newValue {
                    print("Searching cancelled")
                }
            }
    }
}

可能需要注意的是，isSearching似乎必须在searchable修饰符的子视图中才能正常工作。

Answer 2

基于@jnpdx的答案，类似的东西，但更通用的是：

struct SearchView<Content: View>: View {
    @Environment(\.isSearching) var isSearching
    let content: (Bool) -> Content

    var body: some View {
        content(isSearching)
    }

    init(@ViewBuilder content: @escaping (Bool) -> Content) {
        self.content = content
    }
}

然后，用它就像：

struct ContentView: View {
    @State private var searchText = ""
    @Environment(\.dismissSearch) var dismissSearch
    
    var body: some View {
        NavigationView {
            VStack {
                SearchView { isSearching in
                    Text("Child")
                        .onChange(of: isSearching) { newValue in
                            if !newValue {
                                print("Searching cancelled")
                            }
                        }
                }
                Text("Searching for \(searchText)")
                
            }
            
            .searchable(text: $searchText)
            .navigationTitle("Searchable Example")
        }
    }
}

Answer 3

使用isEmpty和onAppear。

struct SearchView: View {
    @State var text: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                if text.isEmpty {
                    main.onAppear {
                        print("empty")
                        // code here
                    }
                } else {
                    main
                }
            }.searchable(text: $text)
                .onSubmit(of: .search) {
                    print("submit")
                }
        }
    }
    
    var main: some View {
        Text("search").searchable(text: $text)
    }
}