如何识别SwiftUI .searchable修饰符的点击以隐藏页面内容

在使用SwiftUI原生.searchable修饰符时，你遇到的核心问题是无法通过点击手势直接检测搜索栏的激活状态——系统会优先处理搜索栏自身的交互，导致你添加的.onTapGesture无法触发。想要实现点击搜索栏就立即隐藏背景内容，可以通过@FocusState来跟踪搜索框的焦点状态，这是更贴合SwiftUI原生机制的方案。

修改后的代码实现 #

struct ExploreView: View {
    @State private var searchText = ""
    // 用FocusState跟踪搜索框是否获取焦点
    @FocusState private var isSearchFocused: Bool
    
    // 假设你有filteredBrothers数据源
    let filteredBrothers: [User] = []
    
    var body: some View {
        VStack {
            // 当搜索框聚焦，或搜索文本不为空时显示搜索结果列表
            if isSearchFocused || !searchText.isEmpty {
                List {
                    ForEach(filteredBrothers) { user in
                        NavigationLink(value: user) {
                            UserRowView(user: user)
                        }
                    }
                }
                .listStyle(.plain)
            } else {
                // 未激活搜索时显示背景内容
                BackgroundContentExample()
            }
        }
        .navigationTitle("Explore")
        .navigationBarTitleDisplayMode(.inline)
        .searchable(text: $searchText, prompt: "Search for...")
        // 将搜索框的焦点状态绑定到isSearchFocused
        .focused($isSearchFocused)
        // 当搜索框失去焦点且文本为空时，恢复显示背景
        .onChange(of: isSearchFocused) { isFocused in
            if !isFocused && searchText.isEmpty {
                // 这里可以做额外的重置操作
            }
        }
    }
}

// 假设存在以下辅助视图
struct User: Identifiable {
    let id = UUID()
}
struct UserRowView: View {
    let user: User
    var body: some View {
        Text("User Row")
    }
}
struct BackgroundContentExample: View {
    var body: some View {
        Text("Background Content")
            .font(.largeTitle)
            .foregroundColor(.gray)
    }
}

关键改动说明 #

• 用@FocusState替代isTyping：搜索栏被点击时会自动获取焦点，isSearchFocused会立即变为true，直接触发内容切换。
• 绑定焦点状态：通过.focused($isSearchFocused)将搜索框的焦点状态与我们的状态变量绑定，无需额外处理点击手势。
• 逻辑判断调整：判断条件改为isSearchFocused || !searchText.isEmpty，确保点击搜索栏（聚焦）或输入文本时都显示搜索列表，失去焦点且文本为空时恢复背景内容。

这样就能完美实现你想要的效果：点击搜索栏瞬间隐藏背景内容，仅显示搜索栏和空白区域；取消搜索（点击返回或清空文本后失焦）时，背景内容自动恢复。

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