SwiftUI NavigationView显示不正确

我正在学习SwiftUI，并遵循苹果的“Landmark”教程，然后举一些例子，试图利用这些知识制作自己的产品

然而，我真的缺少一些理解，因为我不明白为什么我会有不规范的行为

苹果代码：

struct CategoryHome: View
{
    var body: some View
    {
        NavigationView
        {
            Text("Landmarks Content")
                .navigationBarTitle(Text("Featured"))
        }
    }
}

它产生了这样的结果：

我的代码：

struct ContentView: View
{
    @State private var selection: String? = nil
    
    var body: some View
    {
        NavigationView
        {
            NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
            NavigationLink(destination: Text("Third View"),  tag: "Third",  selection: $selection) { EmptyView() }
            NavigationLink(destination: Text("Forth View"),  tag: "Forth",  selection: $selection) { EmptyView() }
        
            VStack
            {
                Text("Content View")
                Spacer()
                Button("Press to goto 2nd view", action: { self.selection = "Second" })
                Button("Press to goto 3rd view", action: { self.selection = "Third" })
                Button("Press to goto 4th view", action: { self.selection = "Forth" })
                Spacer()
            }
        }
        .navigationBarTitle("Home")
    }
}

它产生了这样的结果：

这是在iPhone11模拟器上

有人能简单地解释一下，为什么它们如此不同，为什么我没有得到我想要的结果，即在iPhone上纵向显示时，有一个带有标题和3个按钮的主“屏幕”。

NavigationView需要一个视图而不是大量视图，因此下面是使用Xcode 12/iOS 14测试的可能解决方案：

struct ContentView: View
{
    @State private var selection: String? = nil
    
    var body: some View
    {
        NavigationView
        {
            VStack
            {
                Text("Content View")
                Spacer()
                Button("Press to goto 2nd view", action: { self.selection = "Second" })
                Button("Press to goto 3rd view", action: { self.selection = "Third" })
                Button("Press to goto 4th view", action: { self.selection = "Forth" })
                Spacer()
            }
            .background(Group {
                    NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
                    NavigationLink(destination: Text("Third View"),  tag: "Third",  selection: $selection) { EmptyView() }
                    NavigationLink(destination: Text("Forth View"),  tag: "Forth",  selection: $selection) { EmptyView() }
            })
                .navigationBarTitle("Home")
        }
    }
}

NavigationView希望在一个视图内而不是大量视图，因此下面是使用Xcode 12/iOS 14测试的可能解决方案：

struct ContentView: View
{
    @State private var selection: String? = nil
    
    var body: some View
    {
        NavigationView
        {
            VStack
            {
                Text("Content View")
                Spacer()
                Button("Press to goto 2nd view", action: { self.selection = "Second" })
                Button("Press to goto 3rd view", action: { self.selection = "Third" })
                Button("Press to goto 4th view", action: { self.selection = "Forth" })
                Spacer()
            }
            .background(Group {
                    NavigationLink(destination: Text("Second View"), tag: "Second", selection: $selection) { EmptyView() }
                    NavigationLink(destination: Text("Third View"),  tag: "Third",  selection: $selection) { EmptyView() }
                    NavigationLink(destination: Text("Forth View"),  tag: "Forth",  selection: $selection) { EmptyView() }
            })
                .navigationBarTitle("Home")
        }
    }
}