iPad横屏时NavigationSplitView侧边栏推开详情，如何实现覆盖效果？

使用NavigationSplitView是看中它的侧边栏、工具栏及详情布局能力，竖屏状态下表现正常，但横屏时侧边栏会推开详情内容，期望实现侧边栏覆盖详情的效果。尝试过以下方案但存在问题：

• 使用ZStack：无法设置透明背景
• 在详情视图上添加Overlay：内容会出现偏移

当前代码示例：

struct ContentView: View {
    var body: some View {
        ZStack {
            NavigationSplitView {
                List {
                    Text("Sidebar")
                        .listStyle(SidebarListStyle())
                }
                .background{
                    Color.gray.ignoresSafeArea()
                }
            } detail: {
                Text("""
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
            """)
            }
        }
    }
}

横屏当前表现：侧边栏展开时挤压详情视图宽度，将其推至右侧；期望表现：侧边栏从左侧滑出，覆盖在详情视图上方。

可以通过修改底层UISplitViewController的preferredDisplayMode属性，实现覆盖式侧边栏，同时保留NavigationSplitView的原生功能。

方案1：自定义SplitView封装（灵活可控） #

通过UIViewControllerRepresentable封装UISplitViewController，直接设置显示模式为.overlay，还可自定义折叠逻辑：

struct OverlaySplitView: UIViewControllerRepresentable {
    func makeUIViewController(context: Context) -> UISplitViewController {
        let splitVC = UISplitViewController(style: .doubleColumn)
        splitVC.preferredDisplayMode = .overlay
        splitVC.delegate = context.coordinator
        
        // 绑定SwiftUI视图到UIKit控制器
        let sidebarVC = UIHostingController(rootView: SidebarView())
        let detailVC = UIHostingController(rootView: DetailView())
        
        splitVC.setViewController(sidebarVC, for: .primary)
        splitVC.setViewController(detailVC, for: .secondary)
        
        return splitVC
    }
    
    func updateUIViewController(_ uiViewController: UISplitViewController, context: Context) {}
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    
    // 自定义折叠逻辑，确保竖屏时保留详情视图
    class Coordinator: NSObject, UISplitViewControllerDelegate {
        func splitViewController(_ svc: UISplitViewController, topColumnForCollapsingToProposedTopColumn proposedTopColumn: UISplitViewController.Column) -> UISplitViewController.Column {
            return .secondary
        }
    }
}

// 侧边栏视图
struct SidebarView: View {
    var body: some View {
        List {
            Text("Sidebar")
        }
        .listStyle(SidebarListStyle())
        .background(Color.gray.ignoresSafeArea())
    }
}

// 详情视图
struct DetailView: View {
    var body: some View {
        Text("""
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
        """)
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        OverlaySplitView()
            .navigationTitle("Demo")
    }
}

方案2：直接修改NavigationSplitView（快速简洁） #

在NavigationSplitView的onAppear回调中获取底层控制器并修改显示模式：

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            List {
                Text("Sidebar")
            }
            .listStyle(SidebarListStyle())
            .background(Color.gray.ignoresSafeArea())
        } detail: {
            Text("""
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when 
            """)
        }
        .onAppear {
            // 获取当前窗口的根SplitViewController
            if let splitVC = UIApplication.shared.windows.first?.rootViewController as? UISplitViewController {
                splitVC.preferredDisplayMode = .overlay
            }
        }
    }
}

关键说明 #

• preferredDisplayMode = .overlay：强制侧边栏以覆盖形式展示，不会挤压详情视图的布局空间
• 方案1适合需要自定义折叠逻辑、扩展功能的场景；方案2适合快速修改现有代码
• 两种方案均保留NavigationSplitView的原生工具栏、导航栈等功能

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