My application uses a TabView
and contained in it there is a NavigationView
so I can transition to different views on the selected tabs. I am using .navigationTitle
together with .navigationBarTitleDisplayMode(.large)
to show users where they are (in the example below the title is set to "Pfizer"
). All is working fine as you can see below:
var body: some View {
TabView(selection: $selectedTab) {
NavigationView {
...
However, as soon as I put a ZStack
around the TabView
(or use .overlay
) the entire views including the navigation header move up into the safe area even though I have not specified an .ignoresSafeArea
anywhere! Here is how it looks like when I am using ZStack
around it:
var body: some View {
ZStack(alignment: .center) {
TabView(selection: $selectedTab) {
NavigationView {
...
Note that I intend to use ZStack to conditionally show a view on top of my TabView/NavigationView as follows:
@Binding var condition: Bool
var body: some View {
ZStack(alignment: .center) {
TabView(selection: $selectedTab) {
NavigationView {
...
}
}
.blur(radius: condition ? 3 : 0)
if condition {
VStack {
VStack(alignment: .center) {
Text("Some text")
.font(.title2).padding(.bottom)
}
.padding()
.background(Color(.secondarySystemBackground))
}
.padding(.horizontal, 40)
}
}
}
I managed to figure out by trial and error that the problem only occurs if I am using the .blur
view modifier on the TabView
that is inside the ZStack
. If I remove the .blur
view modifier, then the problem that I described does not occur and so the initial comment of Asperi makes sense.
I do not understand this behavior and I have no idea why using .blur
messes up the safe area. Can anybody explain this behavior to me please?