在所有视图中实现自定义侧边栏 - SwiftUI [英] Implementing custom sidebar across all views - SwiftUI

问题描述

大纲

我制作了一个自定义的细长侧边栏，我现在正在整个应用程序中实现它.侧边栏包含一个始终显示的主按钮，按下它时会显示或隐藏由导航到其他视图的按钮组成的侧边栏的其余部分.

I have made a custom slimline sidebar that I am now implementing across the whole app. The sidebar consists of a main button that is always showing and when pressed it shows or hides the rest of the sidebar that consists of buttons navigating to other views.

我目前正在通过创建一个像这样的 ZStack 来在每个视图上跨应用程序实现侧边栏:

I am currently implementing the sidebar across the app on each view by creating a ZStack like this:

struct MainView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            SideBarCustom()
            Text("Hello, World!")
        }
    }
}

问题

我计划添加一个 GeometryReader，因此如果显示侧栏，其余内容将移动.考虑到这一点，我在每个视图上实现侧边栏的方式感觉笨拙而且添加它的方式冗长.是否有更简单/更好的方法将其添加到每个视图中?

I am planning on adding a GeometryReader so if the side bar is shown the rest of the content moves over. With this in mind, the way I am implementing the sidebar on every view feels clunky and a long winded way to add it. Is there a more simple/better method to add this to each view?

侧边栏代码:

struct SideBarCustom: View {
    
    @State var isToggle = false
    
    var names = ["Home", "Products", "Compare", "AR", "Search"]
    var icons = ["house.fill", "printer.fill.and.paper.fill", "list.bullet.rectangle", "arkit", "magnifyingglass"]
    var imgSize = 20
    
    var body: some View {
        GeometryReader { geo in
            VStack {
                Button(action: {
                    self.isToggle.toggle()
                }, label: {
                    Image("hexagons")
                        .resizable()
                        .frame(width: 40, height: 40)
                        .padding(.bottom, 20)
                })
                if isToggle {
                    ZStack{
                        RoundedRectangle(cornerRadius: 5)
                            .foregroundColor(Color.red)
                            .frame(width: 70, height: geo.size.height)                        
                        VStack(alignment: .center, spacing: 60) {
                            ForEach(Array(zip(names, icons)), id: \.0) { item in
                                Button(action: {
                                    // NAVIIGATE TO VIEW
                                }, label: {
                                    VStack {
                                        Image(systemName: item.1)
                                            .resizable()
                                            .frame(width: CGFloat(imgSize), height: CGFloat(imgSize))
                                        Text(item.0)
                                    }
                                })
                            }
                        }
                    }
                }
            }
        }
    }
}

推荐答案

我认为没有必要在此处使用 GeometryReader.下面是一个示例，它有一个可以滑入和滑出的动态宽度侧边栏(尽管您可以将其设置为固定值).主内容视图会自动调整大小，因为它位于 HStack 中:

I don't think there's necessarily a reason to use GeometryReader here. The following is an example that has a dynamic width sidebar (although you could set it to a fixed value) that slides in and out. The main content view resizes itself automatically, since it's in an HStack:

struct ContentView : View {
    @State private var sidebarShown = false
    
    var body: some View {
        HStack {
            if sidebarShown {
                CustomSidebar(sidebarShown: $sidebarShown)
                    .frame(maxHeight: .infinity)
                    .border(Color.red)
                    .transition(sidebarShown ? .move(edge: .leading) : .move(edge: .trailing) )
            }
            ZStack(alignment: .topLeading) {
                MainContentView()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                if !sidebarShown {
                    Button(action: {
                        withAnimation {
                            sidebarShown.toggle()
                        }
                    }) {
                        Image(systemName: "info.circle")
                    }
                }
            }
        }
    }
}

struct CustomSidebar : View {
    @Binding var sidebarShown : Bool
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    sidebarShown.toggle()
                }
            }) {
                Image(systemName: "info.circle")
            }
            Spacer()
            Text("Hi")
            Text("There")
            Text("World")
            Spacer()
        }
    }
}

struct MainContentView: View {
    var body: some View {
        VStack {
            Text("Main content")
        }
    }
}

这篇关于在所有视图中实现自定义侧边栏 - SwiftUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！