NavigationBarTitle automatic display mode doesn't work

Question

I am unsure how to fix this. I have implemented a ScrollView and a NavigationView with ZStacks. However, the automatic display mode doesn't work and the ScrollView sits behind it, with the Title overlapping.

https://i.stack.imgur.com/KPkGh.png https://i.stack.imgur.com/H8NwS.png

Here is my current code:

struct Overview: View {
    var body: some View {
        
        ZStack{
            
            NavigationView {
                    
                        ZStack {
                        Color.init("Background")
                            .navigationBarHidden(false)
                            .navigationBarTitle("Overview", displayMode: .automatic)
                            .edgesIgnoringSafeArea(.top)
                            
                            ScrollView(showsIndicators: false) {
                                VStack(spacing: 10) {
                                    ForEach(0..<10) {
                                        Text("Item \($0)")
                                            .foregroundColor(.white)
                                            .font(.largeTitle)
                                            .frame(width: 340, height: 200)
                                            .background(ColorManager.BoxColor)
                                            .cornerRadius(10)
                                    }
                                }
                                .frame(maxWidth: .infinity)
                            }
                    }
        }
        }
    }
}

Not a SwiftUI expert, but, i would guess that the navigation view isn’t set for the body view. And is being set as a title for the interior Z stack. — StonedStudio, Jun 28 '20 at 15:01
Sorry, my Swift terminology isn't that good. Could you explain it differently, or if you wish edit the code. — Gigabite, Jun 28 '20 at 15:18

score 0 · Accepted Answer · answered Jun 28 '20 at 15:45

    var body: some View {
    
    NavigationView {
        
        ScrollView(showsIndicators: false) {
            VStack(spacing: 10) {
                ForEach(0..<10) {
                    Text("Item \($0)")
                        .foregroundColor(.blue)
                        .font(.largeTitle)
                        .frame(width: 340, height: 200)
                        .background(Color(.gray))
                        .cornerRadius(10)
                }
            }
            .frame(maxWidth: .infinity)
        }
        .navigationBarHidden(false)
        .navigationBarTitle("Overview", displayMode: .automatic)
    }
}

You had the navigation item in a ZStack. A ZStack is used to display overlapping views on top of each other.

I believe what you really were looking to achieve stacking the title above the scrollView. That would be achieved with VStack. That however, would still be wrong.

Because it's a navigational setting, it goes inline with the NavigationView. So it can be displayed in the NavigationBar. It doesn't need to be apart of any Stacks.

Thanks StonedStudio, it worked. I was confused how to fix this. I appreciate your help! — Gigabite, Jun 28 '20 at 17:20

NavigationBarTitle automatic display mode doesn't work

1 Answers1