如何使用SwiftUI在iPadOS应用中实现双侧边栏布局

NavigationView 原生仅支持左侧侧边栏，没有内置右侧边栏能力，要实现双侧边栏效果，需要手动在主内容层级叠加右侧独立侧边栏，不要直接占用NavigationView的内置详情列——该列属于递进导航结构，会随尺寸变化自动折叠为导航栈，不符合侧边栏固定在主内容旁的交互逻辑。

完整实现代码 #

import SwiftUI

struct DualSidebarLayoutView: View {
    // 控制右侧边栏显隐状态，可绑定工具栏按钮/手势触发
    @State private var isRightSidebarShow: Bool = true
    // 监听水平尺寸类，适配不同窗口尺寸
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    
    var body: some View {
        NavigationView {
            // 原有左侧边栏
            List {
                Label("Pencil", systemImage: "pencil")
                Label("Paint", systemImage: "paintbrush.fill")
                Label("Erase", systemImage: "quote.opening")
                Label("Cutter", systemImage: "scissors")
                Label("Eyedropper", systemImage: "eyedropper.halffull")
                Label("Draw Line", systemImage: "line.diagonal")
            }
            .listStyle(.sidebar)
            .navigationTitle("Tools")
            
            // 主内容+右侧边栏容器
            HStack(spacing: 0) {
                // 替换为自身业务的主内容视图
                Text("Main Content Area")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color(.systemBackground))
                
                // 仅在大尺寸横屏场景显示右侧边栏
                if isRightSidebarShow && horizontalSizeClass == .regular {
                    List {
                        // 替换为自身业务的右侧边栏菜单项
                        Label("Layers", systemImage: "square.3.layers.3d")
                        Label("Attributes", systemImage: "slider.horizontal.3")
                        Label("Color Panel", systemImage: "paintpalette")
                        Label("Edit History", systemImage: "clock.arrow.circlepath")
                    }
                    .listStyle(.sidebar)
                    .frame(width: 240)
                    .transition(.move(edge: .trailing))
                }
            }
            .animation(.easeInOut, value: isRightSidebarShow)
            .toolbar {
                // 增加和系统风格一致的右侧边栏控制按钮
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button {
                        isRightSidebarShow.toggle()
                    } label: {
                        Image(systemName: "sidebar.right")
                    }
                    .disabled(horizontalSizeClass != .regular)
                }
            }
        }
        .navigationViewStyle(.columns)
    }
}

适配注意事项 #

• 右侧边栏建议设置240pt固定宽度，和系统原生侧边栏默认宽度保持一致，视觉风格更统一
• 必须监听horizontalSizeClass环境值，在水平紧凑尺寸场景（iPad竖屏、小尺寸分屏、Slide Over、iPhone场景）下自动隐藏右侧边栏，避免布局挤压错乱
• 给右侧边栏加上滑入滑出过渡动画，交互和系统侧边栏保持一致
• 如果需要和系统侧边栏一致的毛玻璃质感，可以给右侧边栏添加.background(.ultraThinMaterial)修饰符
• 若需要支持拖拽调整右侧边栏宽度，可以给侧边栏添加横向拖拽手势，动态修改侧边栏的宽度绑定值

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