如何在SwiftUI的NavigationStack中实现侧边滑入滑出侧边栏

你当前使用的sheet modifier是专为底部弹出场景设计的，要实现侧边滑入滑出效果，这里提供两种实用方案：

方案一：覆盖式侧边栏（自定义滑入动画） #

适合需要侧边栏覆盖主视图的场景，完全自定义动画和样式：

struct SideBarExample: View {
    @State var showSideBar = false
    // 自定义侧边栏宽度
    private let sidebarWidth: CGFloat = 280
    
    var mainView: some View {
        Rectangle()
            .foregroundColor(.blue)
            .overlay(Text("Main View"))
            // 可选：点击主视图隐藏侧边栏
            .onTapGesture {
                if showSideBar {
                    showSideBar.toggle()
                }
            }
    }
    
    var sideBar: some View {
        Rectangle()
            .foregroundColor(.green)
            .overlay(Text("Side Bar"))
            .frame(width: sidebarWidth)
    }
    
    var body: some View {
        NavigationStack {
            ZStack(alignment: .leading) {
                mainView
                
                // 侧边栏视图
                sideBar
                    // 根据状态控制偏移：隐藏时滑出左侧屏幕，显示时归位
                    .offset(x: showSideBar ? 0 : -sidebarWidth)
                    // 添加平滑过渡动画
                    .animation(.easeInOut(duration: 0.3), value: showSideBar)
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {
                        showSideBar.toggle()
                    } label: {
                        Image(systemName: "sidebar.left")
                    }
                }
            }
        }
    }
}

核心逻辑： #

• 用ZStack将侧边栏叠加在主视图上方，设置左侧对齐
• 通过offset属性控制侧边栏位置，结合animation实现滑入滑出的过渡效果
• 可按需添加主视图点击隐藏的交互逻辑

方案二：原生分栏式侧边栏（NavigationSplitView） #

适合需要系统原生分栏风格的场景，自动适配不同设备尺寸：

struct SideBarExample: View {
    @State private var showSidebar = false
    
    var body: some View {
        NavigationSplitView(columnVisibility: $showSidebar) {
            // 侧边栏内容
            Rectangle()
                .foregroundColor(.green)
                .overlay(Text("Side Bar"))
        } detail: {
            // 主视图内容
            NavigationStack {
                Rectangle()
                    .foregroundColor(.blue)
                    .overlay(Text("Main View"))
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button {
                                showSidebar.toggle()
                            } label: {
                                Image(systemName: "sidebar.left")
                            }
                        }
                    }
            }
        }
    }
}

核心逻辑： #

• NavigationSplitView是SwiftUI原生分栏组件，iPad上默认同时显示侧边栏和主视图，iPhone上默认隐藏侧边栏
• 通过columnVisibility绑定状态，一键控制侧边栏的显示与隐藏

你可以根据实际场景选择方案：需要高度自定义样式选方案一，偏好系统原生体验选方案二。

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