iOS SwiftUI 侧边栏的实现

在iPhone上使用SwiftUI实现侧边栏导航，是最常用的导航方式。

iPhone SideBar

下面，用个简单的例子, 展示SwiftUI如何实现。

1. 创建侧边栏视图

首先，创建一个侧边栏视图（SidebarView），这将是你的侧边栏菜单。

struct SidebarView: View {
    var body: some View {
        VStack(alignment: .leading) {
            // 添加你的侧边栏菜单项
            Text("首页")
            Text("设置")
            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color.gray)
        .edgesIgnoringSafeArea(.all)
    }
}

2. 主视图与动画状态

在主视图中，你需要一个状态变量来控制侧边栏的显示与隐藏，以及一个用于触发动画的方法。

  // 侧边栏视图
struct ContentView: View {
    @State private var showSidebar: Bool = false

    var body: some View {
        ZStack {
            // 主内容区域
            MainView()
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
                .offset(x: self.showSidebar ? 250 : 0)
                .animation(.default)

            // 侧边栏视图
            if showSidebar {
                SidebarView()
                    .frame(width: 250)
                    .transition(.move(edge: .leading))
            }
        }
        .gesture(DragGesture().onEnded {
            if $0.translation.width > 100 {
                withAnimation {
                    self.showSidebar = true
                }
            }
        })
        .navigationBarItems(leading: Button(action: {
            withAnimation {
                self.showSidebar.toggle()
            }
        }) {
            Image(systemName: "line.horizontal.3")
                .imageScale(.large)
        })
    }
}

3. 实现动画和交互

• 页面右推动画：通过修改主视图的offset属性并添加动画，实现页面右推的效果。当showSidebar为true时，主视图向右移动，否则回到原位。
• 点击打开侧边栏：通过在navigationBarItems中添加一个按钮，并在其action中切换showSidebar的值，实现点击按钮打开侧边栏的功能。同时，通过添加一个DragGesture到ZStack，可以通过向右滑动也打开侧边栏。