SwiftUI设计一个Sidebar

在SwiftUI中创建一个弹出式侧边栏菜单。这个自定义视图还允许在NavigationView中包装你的contentview视图，维护与用户的导航交互。

Frame-6-1.png

我们定义一个侧边栏SideBarStack,如下所示：

struct SideBarStack<SidebarContent: View, Content: View>: View {
    
    let sidebarContent: SidebarContent
    let mainContent: Content
    let sidebarWidth: CGFloat
    @Binding var showSidebar: Bool
    
    init(sidebarWidth: CGFloat, showSidebar: Binding<Bool>, @ViewBuilder sidebar: ()->SidebarContent, @ViewBuilder content: ()->Content) {
        self.sidebarWidth = sidebarWidth
        self._showSidebar = showSidebar
        sidebarContent = sidebar()
        mainContent = content()
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            sidebarContent
                .frame(width: sidebarWidth, alignment: .center)
                .offset(x: showSidebar ? 0 : -1 * sidebarWidth, y: 0)
                .animation(Animation.easeInOut.speed(2))
            mainContent
                .overlay(
                    Group {
                        if showSidebar {
                            Color.white
                                .opacity(showSidebar ? 0.01 : 0)
                                .onTapGesture {
                                    self.showSidebar = false
                                }
                        } else {
                            Color.clear
                            .opacity(showSidebar ? 0 : 0)
                            .onTapGesture {
                                self.showSidebar = false
                            }
                        }
                    }
                )
                .offset(x: showSidebar ? sidebarWidth : 0, y: 0)
                .animation(Animation.easeInOut.speed(2))
                
        }
    }
}

我们使用@ViewBuilder属性包装器自定义视图View，允许您为侧边栏和实际视图内容content传递自定义内容。
自定义的SideBarStack需要传入两个参数：sidebarWidth和showSidebar.
第一个参数选项允许视图在侧边栏打开和关闭时正确地转换侧边栏和content内容，会根据设置的宽度设置两个视图的偏移量。
第二个参数showSidebar控制侧边栏是否显示，用@Binding传入用于将TapGesture放在content内容上.这允许用户点击conent内容和菜单按钮都可以关闭侧边栏。这样让代码看起来更清晰。SwiftUI不会触发Color.clear和.opacity为0的View视图的点击手势。

如何使用

使用方法如下：

struct ContentView: View {
    
    // Controls display of sidebar
    @State var showSidebar: Bool = false
    
    var body: some View {
        SideBarStack(sidebarWidth: 125, showSidebar: $showSidebar) {
           // Sidebar content here
        } content: {
           // Main content here
        }.edgesIgnoringSafeArea(.all)
    }
}

侧边栏内容和content视图可根据需要自定义View!!