SwiftUI使用.searchable时如何监听取消按钮点击并执行自定义操作

方案1：纯SwiftUI实现（无需桥接UIKit） #

系统点击searchable的取消按钮时，会触发两个固定行为：清空搜索文本、将isSearching环境变量从true置为false。你可以通过监听这两个状态的变化，区分用户手动清空文本和点击取消的场景，触发自定义操作：

import SwiftUI

struct SearchView: View {
    @State private var searchText = ""
    @Environment(\.isSearching) private var isSearching
    @State private var lastIsSearching = false

    var body: some View {
        NavigationStack {
            List {
                // 你的列表内容
            }
            .searchable(text: $searchText)
            .onChange(of: isSearching) { newState in
                // 仅当从搜索状态退出、且搜索文本为空时，判定为点击取消按钮
                if lastIsSearching && !newState && searchText.isEmpty {
                    customCancelAction()
                }
                lastIsSearching = newState
            }
        }
    }

    func customCancelAction() {
        // 此处执行你需要的自定义逻辑
        print("取消按钮被点击")
    }
}

方案2：桥接UIKit实现精准监听 #

如果你需要完全精准的取消按钮点击回调，不依赖系统行为判断，可以直接桥接UIKit的UISearchBar，使用原生的searchBarCancelButtonClicked代理方法：

// 自定义桥接搜索栏
struct CustomSearchBar: UIViewRepresentable {
    @Binding var text: String
    var onCancel: () -> Void

    func makeUIView(context: Context) -> UISearchBar {
        let bar = UISearchBar()
        bar.delegate = context.coordinator
        bar.showsCancelButton = true
        return bar
    }

    func updateUIView(_ uiView: UISearchBar, context: Context) {
        uiView.text = text
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(text: $text, onCancel: onCancel)
    }

    class Coordinator: NSObject, UISearchBarDelegate {
        @Binding var text: String
        var onCancel: () -> Void

        init(text: Binding<String>, onCancel: @escaping () -> Void) {
            _text = text
            self.onCancel = onCancel
        }

        func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
            text = searchText
        }

        func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
            text = ""
            searchBar.endEditing(true)
            onCancel()
        }
    }
}

// 调用示例
struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationStack {
            VStack {
                CustomSearchBar(text: $searchText, onCancel: {
                    // 自定义取消逻辑
                    print("取消按钮被点击")
                })
                List {
                    // 你的列表内容
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者nickreps