Draw a view over the navigation bar-CodePudding

I'm working on a bottom sheet that can be invoked from any other screen. The bottom sheet will be displayed on top of a half-opaque overlay and I would like the overlay to render full screen over any other view including the navigation bar and the tab bar.

However, I can't seem to be able to figure out how to get the content of the navigation bar to be behind the overlay. Here is what a demo of my current implementation looks like. As you can see, it's possible to interact with the content of the navigation bar even though it is visually displayed behind the overlay.

Half Screen	Full Screen	Back button is still active

And here is the simplified code of my current implementation:

import SwiftUI

struct MainNavigationView: View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: AnoterView()) {
        Text("Navigate to the next screen")
      }
    }
  }
}

struct AnoterView: View {
  var body: some View {
    ZStack {
      Color(uiColor: .red)
        .edgesIgnoringSafeArea(.all)
        .navigationTitle("Test")
        .navigationBarTitleDisplayMode(.inline)

      ViewWithOverlay()
    }
  }
}

struct ViewWithOverlay: View {
  var body: some View {
    ZStack {

      // I'd like this overlay to be rendered over the navigation bar
      Color(uiColor: .blue)
        .edgesIgnoringSafeArea(.all)

      Color(uiColor: .green)
    }
  }
}

And the outcome:

As you can see, while the blue color, which represent my overlay, is drawn over the red color, the title and the back button are still displayed on top of the blue color.

I understand why this is happening, but I cannot think of any workaround in SwiftUI to fix this that can be invoked from any view.

Any help is appreciated.

CodePudding user response：

One way can be to hide the navigation bar when you are showing the overlay view. This can be done using the following code:

 .navigationBarHidden(isPresented ? true: false)

CodePudding user response：

If you want to overlay everything then it should be on root, including over NavigationView as well, ie.

ZStack {
  NavigationView {
    Color(uiColor: .red).edgesIgnoringSafeArea(.all)
  }

  ViewWithOverlay()  // << here !!
}
.edgesIgnoringSafeArea(.all)