SwiftUI NavigationStack搜索功能：点击搜索显视图，取消按钮隐藏视图

要实现点击搜索显示视图、点击取消隐藏视图的逻辑，核心是监听搜索文本变化并完善取消事件处理，具体修改如下：

关键调整点 #

• 移除$searchText.wrappedValue的冗余写法，直接用searchText.isEmpty判断文本状态
• 通过onChange(of: searchText)监听搜索文本变化，当文本清空时自动隐藏目标视图（覆盖点击取消按钮的场景）
• 可选：给搜索结果视图添加手动取消按钮，增强交互灵活性

修改后的完整代码 #

@State private var searchText = ""
@State private var showView = false

var body: some View {
    NavigationStack {
        if searchText.isEmpty {
            ScrollView(.vertical, showsIndicators: true) {
                something()
            }
            .navigationBarTitle("Summary")
        } else {
            Text("Find: \(searchText)")
        }
        
        // 用overlay放置搜索结果视图，避免打乱主布局结构
        if showView {
            showSomethingView()
                .overlay(alignment: .topTrailing) {
                    Button("取消") {
                        searchText = ""
                        showView = false
                    }
                    .padding()
                    .background(.white)
                    .cornerRadius(8)
                }
        }
    }
    .searchable(
        text: $searchText,
        placement: .navigationBarDrawer(displayMode: .always),
        prompt: "Look for something"
    )
    .onSubmit(of: .search) {
        showView = true
        // 在这里添加具体搜索逻辑，比如接口调用、数据过滤等
    }
    .onChange(of: searchText) { _, newValue in
        // 搜索文本清空时（包括点击取消按钮），自动隐藏视图
        if newValue.isEmpty {
            showView = false
        }
    }
}

逻辑说明 #

1. 点击搜索按钮时，onSubmit(of: .search)触发，设置showView=true显示目标视图，同时可在此处执行具体搜索操作
2. 点击取消按钮时，系统自动清空searchText，onChange监听到文本为空后，设置showView=false隐藏视图
3. 用户手动清空搜索文本时，同样会触发onChange逻辑，自动隐藏视图
4. 给搜索结果视图添加手动取消按钮是可选操作，方便用户在不关闭搜索栏的情况下直接隐藏视图

内容的提问来源于stack exchange，提问作者Aleš Slabý