1

我是 SwiftUI 的新手,我的“汉堡包”菜单有问题。

基本上我为主页创建了 2 个视图:主页视图和主侧菜单视图。

我的主要目标是将“汉堡包”按钮放在视图的左上角,并在单击时打开侧面菜单。但是,当我使用 .edgesIgnoringSafeArea(.top) 并将“汉堡包”按钮放在视图的左上角时,该按钮不会打开菜单。相反,如果我不添加 .edgesIgnoringSafeArea(.top),则该按钮将显示在视图中间,并且在单击它时可以正常打开菜单。

你能帮我看看我做错了什么吗?

提前致谢。

主页视图

import SwiftUI
    struct HomeView: View {      
       var body: some View {
           NavigationView{
              ScrollView{
                VStack(alignment: .center) {
                    Text("Home")
                        .font(.system(size: 22))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(.top, 20)
                        .padding(.bottom, 20)

                }
                .frame(width: UIScreen.main.bounds.width, height: 80)
                .background(Color.blue)

                Image("image")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .edgesIgnoringSafeArea(.all)
             }
             .edgesIgnoringSafeArea(.top)
         }
         .navigationBarBackButtonHidden(true)
    }
}

主侧菜单视图

import SwiftUI

struct HomeSideMenuView : View {

@State var showMenu = false

var body: some View {

    let drag = DragGesture()
        .onEnded {
            if $0.translation.width < -100 {
                withAnimation {
                    self.showMenu = false
                }
            }
    }

    return NavigationView {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                VStack {

                      HomeView()
                        .overlay(
                            Button (action:{
                               withAnimation {
                                   self.showMenu = true
                               }
                            }){
                               Image(systemName: "line.horizontal.3")
                                   .padding()
                                   .imageScale(.large)
                                   .font(Font.system(size: 20, weight: .bold))
                           }
                           .padding()
                           .foregroundColor(.white)
                           .shadow(color: Color.gray, radius: 0.2, x: 1, y: 1)
                           .frame(maxWidth: geometry.size.width, maxHeight: geometry.size.height, alignment: .topLeading)
                           .edgesIgnoringSafeArea(.top) // -> if I add this line, the button doesn't work
                        )       
                    }
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .offset(x: self.showMenu ? geometry.size.width/1.5 : 0)
                    .disabled(self.showMenu ? true : false)

                    if self.showMenu {
                        MenuView()
                            .frame(width: geometry.size.width/1.5, height: geometry.size.height)
                            .transition(.move(edge: .leading))
                    }
                }
                .gesture(drag)

        }
    }
    .navigationBarBackButtonHidden(true)

}
}
4

1 回答 1

2

我有同样的问题,我想前 100px 是保留给导航栏的,只需添加

.navigationBarTitle("")
.navigationBarHidden(true)

到您的视图容器(NavigationView 的第一个孩子)。希望这可以帮助

于 2020-04-20T00:53:33.910 回答