SwiftUI NavigationSplitView双列与三列界面实现方案咨询

你的核心问题是嵌套NavigationSplitView导致的视图重叠，因为每个NavigationSplitView都会占据全屏空间，嵌套后两个视图容器会叠加显示。正确的做法是使用单一顶层NavigationSplitView，通过状态控制各列的内容与可见性，实现双列和三列布局的动态切换。

解决方案代码 #

import SwiftUI

struct ContentView: View {
    // 跟踪主侧边栏选中的视图类型
    @State private var selectedMainView: MainViewType? = nil
    // 跟踪SecondView子列表的选中项
    @State private var secondViewSubSelection: String? = nil
    
    enum MainViewType {
        case first
        case second
    }

    var body: some View {
        NavigationSplitView(sidebar: {
            // 主侧边栏列表
            List(selection: $selectedMainView) {
                NavigationLink(value: MainViewType.first) {
                    Text("First View")
                }
                NavigationLink(value: MainViewType.second) {
                    Text("Second View")
                }
            }
            .navigationTitle("Sidebar")
        }, content: {
            // 中间内容列：仅选中SecondView时显示
            if selectedMainView == .second {
                List(selection: $secondViewSubSelection) {
                    NavigationLink("First Sub Item", value: "firstSub")
                    NavigationLink("Second Sub Item", value: "secondSub")
                }
                .navigationTitle("Second Content")
            } else {
                // 选中FirstView时，内容列置空（或隐藏）
                EmptyView()
            }
        }, detail: {
            // 右侧详情列：根据选中状态动态切换内容
            Group {
                if let selectedView = selectedMainView {
                    switch selectedView {
                    case .first:
                        FirstView()
                    case .second:
                        if let subItem = secondViewSubSelection {
                            Text("\(subItem) Detail")
                                .navigationTitle("\(subItem) Detail")
                        } else {
                            Text("Select a sub item")
                                .navigationTitle("Second Detail")
                        }
                    }
                } else {
                    Text("Select a view")
                        .navigationTitle("Detail")
                }
            }
        })
        // 强制切换双列/三列布局
        .navigationSplitViewColumnVisibility(.constant(
            selectedMainView == .first ? .doubleColumn : .tripleColumn
        ))
    }
}

struct FirstView: View {
    var body: some View {
        Text("First View Detail")
            .navigationTitle("First Detail")
    }
}

关键实现思路 #

1. 避免嵌套NavigationSplitView：始终使用一个顶层的NavigationSplitView管理所有列布局，彻底解决视图重叠问题。
2. 状态驱动列内容：通过selectedMainView变量控制中间内容列的显示/隐藏，以及右侧详情列的内容。
3. 强制切换布局模式：利用navigationSplitViewColumnVisibility，在选中FirstView时切换为双列（侧边栏+详情），选中SecondView时切换为三列（侧边栏+内容列表+详情）。
4. 子列表状态管理：为SecondView的子列表添加独立状态secondViewSubSelection，实现子选项的详情展示逻辑。

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