CODEWITHSUNDEEP
swiftuiswiftui-navigationstack
helloimbrando
helloimbrando

Reputation: 655

SwiftUI NavigationBar has weird behaviour

I have a straightforward List embedded in a NavigationStack like this:

   NavigationStack{
     List{
       Section{
          ......
       }
     }
     .listStyle(.plain)
     .navigationBarTitleDisplayMode(.automatic)
     .navigationTitle("New event")
     .toolbar{
        ToolbarItem(placement:.topBarTrailing){
            Button("Done"){
               ....
            }
        }
      }
   }

When I scroll the list, the "blur" effect only appears around the title and not the entire bar. The preview looks fine, but when I run the code on the simulator or device, the issue occurs.

This is OK

This is NOT OK

I want the blur effect to be applied to all the areas highlighted in green. This is the first time I have encountered this issue, and I have always structured my NavigationStacks in this manner. What am I doing wrong? Could this be a bug?

EDIT: There appears to be a default padding for the NavigationStack. I'm not applying any padding to it, but even with a simple list like this:

NavigationStack{
   List{
      Section{
        Text("Hello")
      }
    }
 }

The padding only appears in the simulator and on the device. enter image description here

I'm working with XCode 15.4.

Upvotes: 0

Views: 46

Answers (1)

Benzy Neez
Benzy Neez

Reputation: 21730

In your screenshot, the Material effect behind the header has some padding at the sides. Based on this clue, I was able to reproduce the issue with this elaborated version of your example:

var body: some View {
    NavigationStack {
        List {
            Section {
                ForEach(0..<100) { i in
                    Text("Row \(i)")
                }
            }
        }
        .listStyle(.plain)
        .navigationBarTitleDisplayMode(.automatic)
        .navigationTitle("New event")
        .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                Button("Done") {}
            }
        }
    }
    .padding() // 👈 THIS IS CAUSING THE PROBLEM
}

Screenshot

To fix, remove the padding being applied to the NavigationStack:

Screenshot

Upvotes: 0

Related Questions