0

I have noticed a very strange issue when using two embedded TabView in a navigation view. My code sample show a TabView (page mode) imbedded in a NavigationView. One of the tabs (tag 2) is also a TabView (verticalPage mode). When I first display the vertical TabView (tag 2), the vertical layout of the shown VStack is not centered. If I go back to the first tab (tag 1) and then to the second (tag 2), it's displayed correctly. If I don't embed these tabview in a NavigationView, it's also displayed correctly.

layout when view appears (bad):

layout when view appears (bad)

layout after going back to tab 1 and then to tab 2 (correct):

layout after going bac to tab 1 and then to tab 2 (correct)

What am I missing ?

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink {
                TabViews()
            } label: {
                VStack {
                    Text("Nav to TabView")
                }
            }
        }
    }
}

struct TabViews: View {
    @State private var sel = 2
    
    var body: some View {
        TabView(selection: $sel) {
            Text("Tab 1")
                .tag(1)
            TabView {
                View2()
                View2()
            }
            .tag(2)
            .tabViewStyle(.verticalPage)
        }
        .tabViewStyle(.page)
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                Text(String(format: "Tab %d", sel))
            }
        }
    }
}

struct View2: View {
    var body: some View {
        VStack {
            Text("Text 1")
            Text("Text 2")
            Text("Text 3")
            Text("Text 4")
        }
        .font(.largeTitle)
        .background(Color.red)
    }
}

0 Answers0