SwiftUI

Question

我是 SwiftUI 的新手，我的 "hamburger" 菜单有问题。

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

我的主要目标是将 "hamburger" 按钮放在视图的左上角，并在单击时打开侧边菜单。但是，当我使用 .edgesIgnoringSafeArea(.top) 并将 "hamburger" 按钮放在视图的左上角时，该按钮不会打开菜单。相反，如果我不添加 .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 [=11=].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)

}
}

Answer 1

我遇到了同样的问题，我想前100px是保留给导航栏的，只需添加

.navigationBarTitle("")
.navigationBarHidden(true)

到您的视图容器（NavigationView 的第一个子项）。希望这有帮助

SwiftUI - 按钮在视图的左上角不起作用

SwiftUI - Button doesn't work at the top left of the view

animation

menu

button

geometryreader