我正在使用带有侧边菜单的导航链接。
正如我们从下面的 gif 中看到的,当用户被推送到内部视图并打开菜单时,它会自动弹出到根视图,然后将其推送到配置文件视图。我期待它从内部视图本身推动。
我按照 this tutorial 创建了导航侧边菜单。
这是我的代码。我创建了这个导航模型 AppNavigationViewModel
,我已将其传递给内部视图以便于访问,因为内部视图可以有 n 个。
class AppNavigationViewModel:ObservableObject {
@Published var shouldPushToContentView:Bool = false
@Published var showMenu:Bool = false
}
struct ContentView: View {
@StateObject private var navigationModel:AppNavigationViewModel = AppNavigationViewModel()
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .leading) {
NavigationView {
VStack {
NavigationLink(
destination: ProfileView(),
isActive: self.$navigationModel.shouldPushToContentView,
label: {
EmptyView()
})
MainView()
.frame(width: geometry.size.width, height: geometry.size.height)
}
}
if self.navigationModel.showMenu {
MenuView()
.frame(width: geometry.size.width/2)
.transition(.move(edge: .leading))
}
}
}.environmentObject(self.navigationModel)
}
}
struct MainView: View {
@EnvironmentObject private var navigationModel:AppNavigationViewModel
var body: some View {
NavigationLink(
destination: InnerMainView(),
label: {
Text("Push to subview")
}
)
.navigationBarTitle("Root Menu", displayMode: .inline)
.navigationBarItems(trailing: (
Button(action: {
withAnimation {
self.navigationModel.showMenu.toggle()
}
}) {
Image(systemName: "line.horizontal.3")
.imageScale(.large)
}
))
}
}
struct MenuView: View {
@EnvironmentObject private var navigationModel:AppNavigationViewModel
var body: some View {
VStack(alignment: .leading) {
Button(action: {
self.navigationModel.showMenu = false
self.navigationModel.shouldPushToContentView = true
}, label: {
HStack {
Image(systemName: "person")
.foregroundColor(.gray)
.imageScale(.large)
Text("Profile")
.foregroundColor(.gray)
.font(.headline)
}
})
.padding(.top, 100)
Spacer()
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.background(Color(red: 32/255, green: 32/255, blue: 32/255).opacity(0.9))
.edgesIgnoringSafeArea(.all)
}
}
struct InnerMainView: View {
@EnvironmentObject private var navigationModel:AppNavigationViewModel
var body: some View {
Button(action: {
withAnimation {
self.navigationModel.showMenu.toggle()
}
}) {
Text("Show Menu From Inner Main View")
}
.navigationBarTitle("Inner View", displayMode: .inline)
.navigationBarItems(trailing: (
Button(action: {
withAnimation {
self.navigationModel.showMenu.toggle()
}
}) {
Image(systemName: "line.horizontal.3")
.imageScale(.large)
}
))
}
}
struct ProfileView: View {
@EnvironmentObject private var navigationModel:AppNavigationViewModel
var body: some View {
Button(action: {
withAnimation {
self.navigationModel.showMenu.toggle()
}
}) {
Text("Profile View")
}
.navigationBarTitle("Profile View", displayMode: .inline)
.navigationBarItems(trailing: (
Button(action: {
withAnimation {
self.navigationModel.showMenu.toggle()
}
}) {
Image(systemName: "line.horizontal.3")
.imageScale(.large)
}
))
}
}