如何在子链接视图中在导航栏顶部显示视图

Question

我正在尝试让滑动侧边菜单覆盖屏幕和导航栏。我正在关注 this tutorial 来实现它，当您在实际视图中声明 NavigationView 时它运行良好，因此您可以将它外部嵌入您的 NavigationView ZStack 中的同级。

但是，每当我尝试从 NavigationLink 中拉入此视图时，滑动菜单上的视图都是“可见的”，同时也被导航栏及其视图挡住了。有关如何解决此问题的任何想法？

侧菜单代码：

struct SlidingSideMenu<Content: View>: View {
  let width: CGFloat
  let isOpen: Bool
  let menuClose: () -> Void
  let content: Content
  
  init(width: CGFloat, isOpen: Bool, menuClose: @escaping () -> Void, @ViewBuilder content: () -> Content) {
    self.width = width
    self.isOpen = isOpen
    self.menuClose = menuClose
    self.content = content()
  }
  
  var body: some View {
    ZStack {
      GeometryReader { _ in
        EmptyView()
      }
      .background(Color.gray.opacity(0.3))
      .opacity(self.isOpen ? 1.0 : 0.0)
      .animation(Animation.easeIn.delay(0.25))
      .onTapGesture {
        self.menuClose()
      }
      .edgesIgnoringSafeArea(.all)
      
      HStack {
        MenuContent(menuClose: menuClose) {
          self.content
        }
        .frame(width: self.width)
        .background(Color.white)
        .offset(x: self.isOpen ? 0 : -self.width)
        .animation(.default)
        .edgesIgnoringSafeArea(.top)
        
        Spacer()
      }
    }
  }
}

工作：

struct MainDetailsView: View {
  @State var menuOpen: Bool = false
  
  var body: some View {
    ZStack {
      NavigationView {
        ScrollView {
          Text("Page Content")
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
        .navigationBarTitle("Nav title")
        .navigationBarItems(leading: Button(action: { self.openMenu() }) {
          Image(systemName: "magnifyingglass.circle.fill")
            .font(.system(size: 25))
            .foregroundColor(Color.secondary)
        }.frame(maxWidth: .infinity, alignment: .leading))
      }
      
      SlidingSideMenu(width: 270,
               isOpen: self.menuOpen,
               menuClose: self.openMenu){
        VStack{
          Text("Side Menu Content")
          Spacer()
        }
      }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
      .edgesIgnoringSafeArea(.all)
      
    }
  }
  
  func openMenu() {
    self.menuOpen.toggle()
  }
}


struct MainDetailsView_Previews: PreviewProvider {
  static var previews: some View {
    MainDetailsView()
  }
}

Working GIF

不工作：

struct ParentNavView: View {
  var body: some View {
    NavigationView {
      NavigationLink(
      destination: MainDetailsView()) {
        Text("N A V I G A T E")
      }
    }
  }
}

struct MainDetailsView: View {
  @State var menuOpen: Bool = false
  
  var body: some View {
    ZStack {
      // NavView removed
        ScrollView {
          Text("Page Content")
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
        .navigationBarTitle("Nav title")
        .navigationBarItems(leading: Button(action: { self.openMenu() }) {
          Image(systemName: "magnifyingglass.circle.fill")
            .font(.system(size: 25))
            .foregroundColor(Color.secondary)
        }.frame(maxWidth: .infinity, alignment: .leading))
      
      SlidingSideMenu(width: 270,
               isOpen: self.menuOpen,
               menuClose: self.openMenu){
        VStack{
          Text("Side Menu Content")
          Spacer()
        }
      }.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
      .edgesIgnoringSafeArea(.all)
      
    }
  }
  
  func openMenu() {
    self.menuOpen.toggle()
  }
}

struct MainDetailsView_Previews: PreviewProvider {
  static var previews: some View {
    ParentNavView()
  }
}

Not working GIF