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 after going back 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)
}
}