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.
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.
I'm working with XCode 15.4.
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
}
To fix, remove the padding being applied to the NavigationStack
: