SwiftUI NavigationView + tabView 显示导航标题略微偏离屏幕

Question

I have three views inside of TabView, each with a naviagtionTitle. However, when the first view shows up, the navigationTitle leads almost off the screen. It is only when I click to another page and then back to the original that the navigationTitle appears in the correct placement. What could be the problem?

struct OnboardingView : View {
    
    @Binding var shouldShowOnboarding: Bool
    
    
    var body : some View {
        TabView {
            PageView(imageName: "Onboarding",
                     title: "Zone Out of This World",
                     showsDismissButton: false,
                     shouldShowOnboarding : $shouldShowOnboarding)
            PageView(imageName: "Onboarding",
                     title: "Improve Your Focus",
                     showsDismissButton: false,
                     shouldShowOnboarding : $shouldShowOnboarding)
            PageView(imageName: "Onboarding",
                     title: "Meditate to Relax",
                     showsDismissButton: true,
                     shouldShowOnboarding : $shouldShowOnboarding)
            
        }
        .tabViewStyle(PageTabViewStyle())
        .edgesIgnoringSafeArea(.all)
    }
}



struct PageView : View {
    
    let imageName: String
    let title: String
    let showsDismissButton : Bool
    @Binding var shouldShowOnboarding: Bool
    
    
    
    var body: some View {
        
        NavigationView {
            ZStack {
                Image(imageName)
                    .ignoresSafeArea()
                
                
                if showsDismissButton {
                    Button(action: {
                        shouldShowOnboarding.toggle()


                    }, label: {
                        Text("Get Started")
                            .frame(width: 352, height: 57)
                            .background(Color(#colorLiteral(red: 0.8470588326454163, green: 0.37254902720451355, blue: 0.27450981736183167, alpha: 1)))
                            .foregroundColor(Color.white)
                            .cornerRadius(30)
                            .padding(.top, 600)
                    })
                }
            }
            .navigationTitle(title)
          
        }
        .navigationViewStyle(.stack)
    }
}

I have included screenshots.

Incorrect placement:

Correct placement:

Answer 1

.edgesIgnoringSafeArea(.all) appears to be causing the initial shift. I'm not sure why it corrects itself after you shift views, but based on the current code, I don't see why you want to have the .edgesIgnoringSafeArea so I think it would be safe to just comment it out in order to have the second intended style.