Navigation View inside Tabview not displaying correctly in landscape mode

Question

Created Dec ’22

Replies 2

Boosts 0

Participants 2

No issue in portrait mode. In landscape mode, navigation view and all subviews are "collapsed" into a top-level menu. See screen shots.

Is it normal behaviour? Could not find any modifier to change this behaviour if it is normal.

    ChartView().tabItem {
        Label("Chart", systemImage: "chart.bar")
    }
    Page1View().tabItem {
        Label("Received", systemImage: "tray.and.arrow.down.fill")
    }
}

body of Page1View struct:-
var body: some View {
    NavigationView {
        VStack(spacing: 10) {
        // ... removed for clarity
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Text("tbar1")
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Text("tbar2")
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                Text("tbar3")
            }
        }
    }
}

Portrait mode:

Landscape mode:

Landscape mode after tapping top left menu:

Boost

Answer 1

Sydney-CBD OP

Dec ’22

Found solution:- Added navigationViewStyle of .stack:-

NavigationView{ } .navigationViewStyle(.stack)

0

Answer 2

BabyJ OP

Dec ’22

This is the default behaviour for NavigationView – single column in a compact horizontal size class and a two/three column layout in a regular size class.

Either apply this modifier to the NavigationView:

navigationViewStyle(.stack)

or use a NavigationStack instead.

0