SwiftUI中TabView与NavigationSplitView组合时SafeArea失效问题求解

在SwiftUI里把TabView和NavigationSplitView一起用的时候，经常会碰到SafeArea失效的问题——内容要么被TabBar挡住，要么和导航栏重叠。而UIKit的UISplitViewController能做到像Apple Music那样的完美适配，下面给两种可行的SwiftUI实现方案。

方案一：纯SwiftUI修复SafeArea适配 #

直接调整SwiftUI视图结构，确保NavigationSplitView的内容正确识别TabView的SafeArea范围：

修改后的完整代码：

import SwiftUI

struct ContentView: View {
    @State private var selection: Int?
    
    var body: some View {
        TabView {
            NavigationSplitView {
                List(0..<10, selection: $selection) { item in
                    Text("条目 \(item)")
                        .tag(item)
                }
                .navigationTitle("导航标题")
                .navigationBarTitleDisplayMode(.inline)
                // 让侧边栏视图识别底部TabBar的SafeArea
                .safeAreaInset(edge: .bottom) {
                    Color.clear.frame(height: 0)
                }
            } detail: {
                Group {
                    if let selection {
                        Text("详情：\(selection)")
                            .navigationTitle("详情标题")
                            .navigationBarTitleDisplayMode(.inline)
                    } else {
                        Text("未选择内容")
                    }
                }
                // 让详情视图也识别底部TabBar的SafeArea
                .safeAreaInset(edge: .bottom) {
                    Color.clear.frame(height: 0)
                }
            }
            .tabItem {
                Label("列表标签", systemImage: "list.bullet")
            }
            
            Text("标签页2")
                .tabItem {
                    Label("第二个标签", systemImage: "list.bullet")
                }
            
            Text("标签页3")
                .tabItem {
                    Label("另一标签", systemImage: "list.bullet")
                }
            Text("标签页4")
                .tabItem {
                    Label("另一标签", systemImage: "list.bullet")
                }
            Text("标签页5")
                .tabItem {
                    Label("另一标签", systemImage: "list.bullet")
                }
        }
    }
}

解释：给侧边栏和详情视图都加上空的底部safeAreaInset，相当于强制视图去识别TabBar占据的SafeArea空间，避免内容被TabBar覆盖。这个方案不需要依赖UIKit，纯SwiftUI就能搞定。

方案二：UIKit桥接实现原生级适配 #

如果纯SwiftUI方案还是有适配问题，那就直接用UIKit的UISplitViewController来包装，复用它成熟的适配逻辑，完全复刻Apple Music的效果：

第一步：创建UISplitViewController的SwiftUI包装器 #

struct SplitViewWrapper: UIViewRepresentable {
    @Binding var selection: Int?
    
    func makeUIView(context: Context) -> UISplitViewController {
        let splitVC = UISplitViewController(style: .doubleColumn)
        
        // 配置侧边栏视图
        let sidebarVC = UIHostingController(rootView: SidebarView(selection: $selection))
        splitVC.setViewController(sidebarVC, for: .primary)
        
        // 配置详情视图
        let detailVC = UIHostingController(rootView: DetailView(selection: $selection))
        splitVC.setViewController(detailVC, for: .secondary)
        
        // 设置和Apple Music一致的分栏显示模式
        splitVC.preferredDisplayMode = .automatic
        splitVC.delegate = context.coordinator
        
        return splitVC
    }
    
    func updateUIView(_ uiView: UISplitViewController, context: Context) {
        // 更新视图绑定的选中状态
        if let sidebarVC = uiView.viewController(for: .primary) as? UIHostingController<SidebarView> {
            sidebarVC.rootView.selection = $selection
        }
        if let detailVC = uiView.viewController(for: .secondary) as? UIHostingController<DetailView> {
            detailVC.rootView.selection = $selection
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UISplitViewControllerDelegate {
        var parent: SplitViewWrapper
        
        init(_ parent: SplitViewWrapper) {
            self.parent = parent
        }
        
        // 处理折叠时的分栏优先级
        func splitViewController(_ svc: UISplitViewController, topColumnForCollapsingToProposedTopColumn proposedTopColumn: UISplitViewController.Column) -> UISplitViewController.Column {
            return .primary
        }
    }
}

// 单独定义侧边栏和详情的SwiftUI视图
struct SidebarView: View {
    @Binding var selection: Int?
    
    var body: some View {
        List(0..<10, selection: $selection) { item in
            Text("条目 \(item)")
                .tag(item)
        }
        .navigationTitle("导航标题")
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct DetailView: View {
    @Binding var selection: Int?
    
    var body: some View {
        if let selection {
            Text("详情：\(selection)")
                .navigationTitle("详情标题")
                .navigationBarTitleDisplayMode(.inline)
        } else {
            Text("未选择内容")
        }
    }
}

第二步：在TabView中使用这个包装器 #

struct ContentView: View {
    @State private var selection: Int?
    
    var body: some View {
        TabView {
            SplitViewWrapper(selection: $selection)
                .tabItem {
                    Label("列表标签", systemImage: "list.bullet")
                }
            
            Text("标签页2")
                .tabItem {
                    Label("第二个标签", systemImage: "list.bullet")
                }
            
            Text("标签页3")
                .tabItem {
                    Label("另一标签", systemImage: "list.bullet")
                }
            Text("标签页4")
                .tabItem {
                    Label("另一标签", systemImage: "list.bullet")
                }
            Text("标签页5")
                .tabItem {
                    Label("另一标签", systemImage: "list.bullet")
                }
        }
    }
}

解释：通过UIViewRepresentable把UIKit的UISplitViewController桥接到SwiftUI里，直接用UIKit经过验证的SafeArea和分栏适配逻辑，完全解决SwiftUI原生组件的适配bug，效果和Apple Music一模一样。

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