ios – Why does the Navigation Bar cease working when used with a Tab Bar of favor .web page?

February 2, 2024

1

I am working with SwiftUI’s Navigation Stack and Tab Bar/Tab Bar Model and earlier than setting the tab bar fashion to web page every part works as anticipated. Right here is an instance:

Code:

struct TabsView: View {
    enum Tab {
        case house
    }
    
    @State personal var selectedTab: Tab = .house
    
    var physique: some View {
        TabView(choice: $selectedTab) {
            NavigationStack {
                ScrollView {
                    Textual content("Residence Display")
                        .navigationTitle("Residence")
                        .navigationBarTitleDisplayMode(.inline)
                        .toolbar(.seen, for: .navigationBar)
                        .toolbarBackground(.seen, for: .navigationBar)
                }
            }
            .tabItem {
                Picture(systemName: "sq.")
            }
            .tag(Tab.house)
        }
    }
}

Screenshot:

However as quickly as I add the .tabViewStyle(.web page), it breaks. It doesn’t take up the total top as anticipated for the navigation bar. Additionally, the textual content is now hidden behind the navigation bar:

Code:

struct TabsView: View {
    enum Tab {
        case house
    }
    
    @State personal var selectedTab: Tab = .house
    
    var physique: some View {
        TabView(choice: $selectedTab) {
            NavigationStack {
                ScrollView {
                    Textual content("Residence Display")
                        .navigationTitle("Residence")
                        .navigationBarTitleDisplayMode(.inline)
                        .toolbar(.seen, for: .navigationBar)
                        .toolbarBackground(.seen, for: .navigationBar)
                }
            }
            .tabItem {
                Picture(systemName: "sq.")
            }
            .tag(Tab.house)
        }
        .tabViewStyle(.web page)
    }
}

Screenshot: