我是 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)
}
}