SwiftUI中如何通过原生.searchable控制搜索栏显隐？

完全可以用原生的.searchable修饰符实现这个需求，不需要自定义搜索栏。核心是利用iOS 16+提供的searchable(isPresented:)重载，结合状态变量控制搜索栏的显隐，再配合导航栏按钮和搜索状态监听来完成交互。

修改后的完整代码 #

struct SomeView: View {
    @Environment(\.dismissSearch) private var dismissSearch
    @Environment(\.isSearching) private var isSearching // 监听当前是否处于搜索状态
    
    @State private var searchString = ""
    @State private var isSearchActive = false // 控制搜索栏的显隐
    
    var body: some View {
        NavigationStack {
            MyView()
                // 使用isPresented绑定来控制搜索栏显隐
                .searchable(text: $searchString, isPresented: $isSearchActive)
                .onSubmit(of: .search) {
                    // 提交搜索后关闭搜索栏
                    dismissSearch()
                }
                .onChange(of: isSearching) { oldValue, newValue in
                    // 当搜索状态结束（从true变为false），同步隐藏搜索栏
                    if !newValue {
                        isSearchActive = false
                    }
                }
                .toolbar {
                    ToolbarItem(placement: .navigationBarTrailing) {
                        Button {
                            // 点击按钮激活搜索栏
                            isSearchActive = true
                        } label: {
                            Image(systemName: "magnifyingglass")
                        }
                    }
                }
        }
    }
}

关键实现细节 #

• isSearchActive状态绑定：通过@State变量绑定到.searchable的isPresented参数，直接控制搜索栏的显示和隐藏。
• 监听搜索状态：利用@Environment(\.isSearching)跟踪搜索激活状态，当用户点击取消按钮或点击外部区域退出搜索时，isSearching变为false，此时同步将isSearchActive设为false，确保搜索栏彻底隐藏。
• 导航栏按钮触发：点击放大镜图标按钮时，设置isSearchActive = true，直接唤起搜索栏。
• 搜索提交后自动关闭：在onSubmit回调中调用dismissSearch()，完成搜索后立即关闭搜索栏，同时触发状态同步逻辑。

注意事项 #

该方案要求iOS版本在16及以上，因为searchable(isPresented:)是iOS 16新增的API重载。如果需要兼容更低版本，可能需要额外的适配逻辑，但原生API在iOS 16+完全可以满足你的需求。

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