SwiftUI NavigationView Title Starting Lower

Viewed 215

So I've got a NavigationView embedded inside of a TabView that is in the Page View Style. Upon the first load, the NavigationView will start with its title lower than where it should be. Once I reload the view, by going to a different tab, it resets its self correctly. Is there a way that I can fix this issue so that it starts in the correct position? I've made a GIF to better illustrate the problem:

My GIF

And here is my code:

struct ContentView: View {
    
    var body: some View {
        TabView {
            SettingsView()
            BlankView(color: .green)
            BlankView(color: .blue)
            BlankView(color: .red)
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        
    }
}

struct SettingsView: View {
    
    var body: some View {
        NavigationView {
            List {
                Section(header: Text("General")) {
                    NavigationLink(destination: SettingsItem(title: "1")) {
                        Text("1")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "2")) {
                        Text("2")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "3")) {
                        Text("3")
                    }
                    
                    NavigationLink(destination: SettingsItem(title: "4")) {
                        Text("4")
                    }
                    
                }
            }
            .listStyle(InsetGroupedListStyle())
            .navigationTitle("Settings")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

struct SettingsItem: View {
    
    @State var title = "Title"
    
    var body: some View {
        NavigationView {
            List {
                
            }
        }
        .navigationTitle(title)
    }
}

struct BlankView: View {
    let color: Color
    
    var body: some View {
        ZStack{
            color
            Text("Blank View")
                .padding()
        }
        .border(Color.black, width: 8)
        
    }
}
0 Answers
Related