SwiftUI中导航至深层视图时如何保持Toolbar Picker置顶？

要实现像Mac音乐App那样，跳转深层视图时保留顶部Picker、同时新增返回栏的效果，核心是把Picker从视图栈中抽离，作为详情栏的固定顶层元素，让内部的NavigationStack单独处理页面跳转逻辑。

问题根源 #

你原来的代码中，Picker是和子视图绑定在同一个层级的toolbar里，一旦通过NavigationLink跳转，当前视图会被压入栈底，Picker自然随之消失。调整结构后，让Picker成为详情视图的固定顶部，内层用NavigationStack管理视图栈，就能实现目标效果。

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    @State private var pick = "A"
    @State private var selectedProject: String? = "Project 1"
    
    var body: some View {
        NavigationSplitView {
            List(selection: $selectedProject) {
                Text("Project 1").tag("Project 1" as String?)
                Text("Project 2").tag("Project 2" as String?)
            }
            .navigationTitle("Projects")
        } detail: {
            // 固定的顶部Picker栏，不受视图栈影响
            VStack(spacing: 0) {
                ToolbarView(pick: $pick)
                
                // 内部NavigationStack单独管理视图跳转
                NavigationStack {
                    ModuleView(pick: $pick)
                        .navigationBarTitleDisplayMode(.inline)
                }
            }
        }
        .navigationSplitViewStyle(.automatic)
    }
}

// 抽离Picker为独立视图，便于复用和维护
struct ToolbarView: View {
    @Binding var pick: String
    
    var body: some View {
        Picker("Pick", selection: $pick) {
            Text("A").tag("A")
            Text("B").tag("B")
            Text("C").tag("C")
            Text("D").tag("D")
            Text("E").tag("E")
        }
        .pickerStyle(.segmented)
        .padding()
        .background(Color(.windowBackgroundColor))
    }
}

// 抽离子模块视图，让结构更清晰
struct ModuleView: View {
    @Binding var pick: String
    
    var body: some View {
        VStack {
            switch pick {
            case "A":
                NavigationLink {
                    Text("F")
                        .navigationTitle("F")
                } label: {
                    Text("A")
                }
            case "B":
                Text("B")
            case "C":
                Text("C")
            case "D":
                Text("D")
            case "E":
                Text("E")
            default:
                Text("A")
            }
        }
        .frame(height: 200)
        .padding()
    }
}

关键改动说明 #

1. 结构拆分：将Picker和视图栈分离，Picker作为固定顶层元素，NavigationStack仅负责承载子模块和跳转，确保Picker不受视图栈变化影响。
2. 背景适配：给ToolbarView添加和窗口一致的背景色，避免切换视图时出现突兀的背景断层。
3. 代码解耦：抽离独立的ToolbarView和ModuleView，让代码结构更清晰，后续修改维护更方便。
4. 导航标题优化：在深层视图（如"F"视图）中设置navigationTitle，确保跳转后返回栏显示正确的标题。

调整后，点击"A"的NavigationLink跳转到"F"视图时，顶部的分段Picker会一直保留，同时在Picker下方会自动出现带有返回按钮的导航栏，完全匹配Mac音乐App的交互效果。

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