NavigationSplitView嵌套TabView显示异常，如何恢复正常显示？

可以通过以下方式修复TabView内NavigationSplitView的显示异常：

1. 显式绑定分栏可见性 #

添加columnVisibility状态变量，明确控制分栏的显示模式，避免TabView的布局干扰：

@State private var selection: String?
@State private var columnVisibility: NavigationSplitViewVisibility = .doubleColumn
let users = ["User1", "User2", "User3"]

var body: some View {
    TabView {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            List(users, id: \.self, selection: $selection) { user in
                NavigationLink(user, value: user)
            }
            .navigationTitle("用户列表")
        } detail: {
            if let user = selection {
                Text(user)
                    .navigationTitle(user)
            } else {
                Text("Pick a node")
                    .navigationTitle("选择用户")
            }
        }
        .tabItem {
            Label("用户", systemImage: "person.circle")
        }
        
        // 其他Tab项
        Text("设置页面")
            .tabItem {
                Label("设置", systemImage: "gear")
            }
    }
}

你可以根据需求调整columnVisibility的初始值：

• .doubleColumn：同时显示侧边栏和详情栏（适合iPad等常规尺寸设备）
• .detailOnly：仅显示详情栏
• .all：显示所有分栏（若包含中间内容栏时生效）

2. 适配紧凑尺寸设备 #

对于iPhone这类紧凑尺寸设备，可通过preferredCompactColumn指定默认显示的分栏，让布局更贴近旧版分栏控制器的表现：

NavigationSplitView(columnVisibility: $columnVisibility) {
    // 侧边栏内容
} detail: {
    // 详情栏内容
}
.preferredCompactColumn(.sidebar) // 紧凑模式下默认显示侧边栏

添加导航标题也能优化TabView内的布局层级，避免内容被TabBar遮挡或布局错乱。

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