SwiftUI中点击.searchable跳转独立搜索结果页的实现方法

要实现点击搜索栏跳转到独立页面、取消返回首页的需求，核心是利用.searchable的激活状态绑定导航跳转，而非叠加视图。以下是具体实现步骤和代码：

iOS 16+ 实现方案（推荐） #

使用NavigationStack结合.searchable的isPresented参数，配合navigationDestination完成跳转：

首页代码 #

struct HomeView: View {
    @State private var searchText = ""
    @State private var isSearchActive = false
    
    var body: some View {
        NavigationStack {
            // 首页原有内容，示例用列表展示
            List(1...20, id: \.self) { num in
                Text("首页条目 \(num)")
            }
            .navigationTitle("首页")
            // 绑定搜索文本和激活状态
            .searchable(text: $searchText, isPresented: $isSearchActive) {
                // 可选：添加搜索建议，不需要可删除
                ForEach(["苹果", "香蕉", "橙子"].filter { $0.contains(searchText) }, id: \.self) { suggestion in
                    Text(suggestion)
                        .searchCompletion(suggestion)
                }
            }
            // 当搜索激活时，跳转到搜索结果页
            .navigationDestination(isPresented: $isSearchActive) {
                SearchResultView(searchText: $searchText, isSearchActive: $isSearchActive)
            }
        }
    }
}

搜索结果页代码 #

struct SearchResultView: View {
    @Binding var searchText: String
    @Binding var isSearchActive: Bool
    
    // 模拟搜索结果数据，实际项目替换为真实接口请求
    private var searchResults: [String] {
        guard !searchText.isEmpty else { return [] }
        return ["苹果手机", "苹果电脑", "香蕉牛奶", "橙子果汁"].filter { $0.contains(searchText) }
    }
    
    var body: some View {
        NavigationStack {
            List(searchResults, id: \.self) { result in
                Text(result)
            }
            .navigationTitle("搜索结果")
            // 添加取消按钮到工具栏
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("取消") {
                        searchText = ""
                        isSearchActive = false
                    }
                }
            }
        }
    }
}

iOS 15 及以下兼容方案 #

如果需要兼容旧版本，用NavigationView配合NavigationLink的isActive绑定实现：

在首页中替换navigationDestination部分为：

.overlay(
    NavigationLink(isActive: $isSearchActive) {
        SearchResultView(searchText: $searchText, isSearchActive: $isSearchActive)
    } label: {
        EmptyView()
    }
)

关键说明 #

• 必须用NavigationStack（iOS16+）或NavigationView（旧版本）包裹首页内容，否则导航跳转无法生效。
• .searchable的isPresented参数会在用户点击搜索栏时自动设为true，触发跳转；点击取消按钮时修改该参数为false，自动返回首页。
• 清空searchText是为了回到首页后搜索栏内容重置，可根据需求调整是否保留搜索文本。

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