why there is an unexpected space when jumping to another page in swift

Question

I want to jump to another page using NavigationLink, but there is an unexpected space at the top of the screen as the picture shows below. This didn't happen before. I don't know whether it's because my front page or the page I try to jump to.

the start page

import SwiftUI

struct HomePage: View {

    var body: some View {
        NavigationView{
            VStack {
                
                NavigationLink(destination: chartDiretor()) {
                       Text("clike")
                    
                }
                NavigationLink(destination: chartDiretor()) {
                       Text("clike")
                    
                }
            }
        }

    }
}

the destination page

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        NavigationView{
            List{
                Text("something")
            }
        }
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

when clike the navigationLink. space highlighted with red rectangle line

what the the page I try to jump to looks like

Answer 1

What you have done is, you've stacked 2 NavigationViews on top of one another. One in SwiftUIView which is again embedded in another NavigationView in HomePage. Your current View hierarchy looks like,

NavigationView // First NavigationView
|- SwiftUIView
   |- NavigationView // Second NavigationView
      |- Some Content    

When it should actually look like,

NavigationView // First and ONLY NavigationView
|- SwiftUIView
   |- Some Content    

---

So, to fix this you can remove the NavigationView in SwiftUIView like the following,

struct SwiftUIView: View {
    var body: some View {
        List{
            Text("something")
        }
        .navigationBarTitle("Country") // Set the Navigation title here
    }
}