How to make content view extend beneath NavigationBar like in a ZStack?

I have view hierarchy like this:

        NavigationView {
            VStack {
                ScrollView { 
                      // some content
                 }
                 .background(NavigationLink(destination:
                                    MyView(),
                                   isActive: $isActive) {
                    EmptyView()
                 })
                 // snipped
            }     
        }

When the user follows the navigation link to MyView, by default NavigationBar and MyView is laid out like in a VStack. How can I make them like in a ZStack(alignment: .topLeading) ? i.e. I like MyView extends beneath the NavigationBar.

Here is the MyView:

        GeometryReader { geo in
            HStack {
               // some content
            }
            .onAppear {
                hideNavigationbar = false
            }
            .onTapGesture(perform: {
                hideNavigationbar.toggle()
            })
            .navigationBarHidden(hideNavigationbar)
            .navigationBarTitleDisplayMode(.inline)
// snipped
       }

The problem is, when hideNavigationbar toggles, MyView would shift up and down because its height would change. I want NavigationBar sits on top of MyView like in a ZStack so that when NavigationBar hides, MyView will not shift (only uncover its top portion).

What is the proper way to achieve that?

XCode: 15.3 using SwiftUI

iOS: 15

  • I tried to use .edgesIgnoringSafeArea([.top]) modifier, but MyView still shift when NavigationBar hides, just shifting a different amount.

Add a Comment