SwiftUI中NavigationStack搜索框交互视图切换配置问题

核心修改点 #

• 补全焦点状态的双向响应逻辑：不仅在搜索框获得焦点时显示新视图，还要在失去焦点（点击取消按钮）时切回原视图
• 绑定搜索提交动作，点击搜索按钮时触发搜索逻辑

完整代码实现 #

import SwiftUI

struct ContentView: View {
    @State private var searchText = ""
    @FocusState private var isSearchFocused: Bool
    @State private var showSearchSettingsView = false
    
    var body: some View {
        NavigationStack {
            // 原视图内容
            if !showSearchSettingsView {
                Text("原视图内容")
                    .navigationTitle("主页面")
            } else {
                // 带搜索设置的新视图
                VStack(spacing: 20) {
                    Text("搜索设置视图")
                    // 可在此添加搜索筛选、排序等设置控件
                    Button("启动搜索") {
                        // 执行具体搜索逻辑
                        print("执行搜索：\(searchText)")
                    }
                }
                .navigationTitle("搜索设置")
            }
        }
        .searchable(
            text: $searchText,
            placement: .navigationBarDrawer(displayMode: .always),
            prompt: LocalizedStringKey("Look for something")
        )
        .focused($isSearchFocused)
        .onChange(of: isSearchFocused) { newValue in
            // 焦点变化时同步切换视图
            showSearchSettingsView = newValue
        }
        .onSubmit(of: .search) {
            // 点击搜索按钮时触发搜索动作
            print("搜索提交：\(searchText)")
            // 可选：提交后可选择保留搜索视图或切回原视图
            // showSearchSettingsView = false
        }
    }
}

关键逻辑说明 #

1. 焦点与视图绑定：通过@FocusState跟踪搜索框的焦点状态，在onChange回调中直接将视图显示状态与焦点状态绑定——点击搜索框获焦时自动展示搜索设置视图，点击取消按钮失焦时自动切回原视图。
2. 搜索提交处理：使用.onSubmit(of: .search)监听搜索按钮的点击事件，在此编写具体的搜索执行逻辑。
3. 视图切换控制：通过if-else在NavigationStack内部切换显示原视图和搜索设置视图，保证界面切换的流畅性。

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