macOS切换两个NavigationSplitView致标题栏/工具栏异常求助

你遇到的问题本质是同一个窗口内存在多个顶层NavigationSplitView导致的UI状态冲突——Apple的SwiftUI设计中，NavigationSplitView本身是顶层容器组件，重复创建会和系统工具栏的布局逻辑产生冲突，进而出现侧边栏按钮消失、顶部灰块、额外Divider这些异常。

下面是两种可行的变通方案：

方案一：复用单个NavigationSplitView，切换内容而非容器 #

核心思路是只保留一个顶层NavigationSplitView，通过选择器切换它的侧边栏和详情区域内容，避免重复创建分栏容器。

修改后的代码示例：

struct ContentView: View {
    @State private var viewSelection = 1
    
    var body: some View {
        NavigationSplitView {
            // 根据选择切换侧边栏内容
            switch viewSelection {
            case 1: Text("Sidebar 1")
            case 2: Text("Sidebar 2")
            default: EmptyView()
            }
        } detail: {
            // 根据选择切换详情内容
            switch viewSelection {
            case 1: Text("View 1")
            case 2: Text("View 2")
            default: EmptyView()
            }
        }
        .toolbar {
            ToolbarItem(placement: .navigation) {
                Picker("", selection: $viewSelection) {
                    ForEach(1..<3) { view in
                        Text("View \(view)").tag(view)
                    }
                }
            }
        }
    }
}

这种方案完全贴合SwiftUI的设计逻辑，UI状态稳定，不会出现布局冲突，适合侧边栏和详情内容关联性较强的场景。

方案二：用TabView封装独立的NavigationSplitView #

如果每个视图需要完全独立的分栏状态（比如各自保存侧边栏的展开/折叠状态），可以用TabView作为顶层容器，将每个NavigationSplitView放在独立Tab中，再用自定义Picker控制Tab切换。

修改后的代码示例：

struct ContentView: View {
    @State private var viewSelection = 1
    
    var body: some View {
        TabView(selection: $viewSelection) {
            SubView1()
                .tag(1)
                .tabItem { EmptyView() } // 隐藏系统默认Tab栏
            SubView2()
                .tag(2)
                .tabItem { EmptyView() }
        }
        .toolbar {
            ToolbarItem(placement: .navigation) {
                Picker("", selection: $viewSelection) {
                    ForEach(1..<3) { view in
                        Text("View \(view)").tag(view)
                    }
                }
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .never)) // 禁用分页指示器
    }
}

// 保留原有的SubView结构
struct SubView1: View {
    var body: some View {
        NavigationSplitView {
            Text("Sidebar 1")
        } detail: {
            Text("View 1")
        }
    }
}

struct SubView2: View {
    var body: some View {
        NavigationSplitView {
            Text("Sidebar 2")
        } detail: {
            Text("View 2")
        }
    }
}

TabView会为每个子视图维护独立的生命周期和UI状态，避免多个NavigationSplitView在同一层级产生冲突，同时通过隐藏系统Tab栏、自定义Picker，保持和原需求一致的交互体验。

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