SwiftUI：容器中的 NavigationView

Question

这里是 SwiftUI 初学者。在过去的 8 天左右的时间里，我一直坚持这一点。我已经观看了数十个视频并搜索了几个小时，但找不到答案。我知道这是非常明显和简单的事情，但我想不通。

我有一个非常大的应用程序，我已在下面以尽可能小的比例复制了我的问题，以便更容易理解。我知道设置在某些部分可能看起来不合逻辑（主要是 ForEach() 使用），但这只是试图在小范围内代表我的问题的结果。我有 3 个文件：

此文件包含 3 个按钮，单击它们会显示一个视图（进一步向下显示）。 要点：当按钮被点击时，不是整个屏幕显示目标视图，只有按钮容器显示视图。

ListOfButtonsView.swift

struct ListOfButtonsView: View {
    
    let buttonNames = ["Button 1", "Button 2", "Button 3"]
    
    var body: some View {
        
        VStack {
            ForEach(0..<buttonNames.count) { button in
                IndividualButtonView()
            }
        }
    }
}

此文件包含上一个文件中每个按钮的蓝图：

IndividualButtonView.swift

struct IndividualButtonView: View {
        
    var body: some View {
        
        NavigationView {
            NavigationLink(destination: CirclesView()) {
                VStack {
                    Text("Button")
                        .font(.largeTitle)
                        .padding(32)
                }
                .frame(maxWidth: .infinity)
                .foregroundColor(.white)
                .background(Color.red)
                .cornerRadius(12)
                .navigationBarHidden(true)
                .padding()
            }
        }
    }
}

最后，保存我希望按钮导航到的视图的文件：

CirclesView.swift

struct CirclesView: View{
    var body: some View {
        VStack {
            Circle()
                .foregroundColor(.red)
            Circle()
                .foregroundColor(.green)
            Circle()
                .foregroundColor(.blue)
        }
        .navigationBarHidden(true)
    }
}

因此，如前所述，单击按钮时，只有按钮容器显示目标视图。但是，我想要的结果是整个屏幕切换到目标视图 (CirclesView.swift)。我该怎么做？

非常感谢任何帮助！

Answer 1

只需将 NavigationView 从 IndividualButtonView 移出 ListOfButtonsView。没有 NavigationLink 直接在 NavigationView 中是可以的，只要在层次结构中更高的地方有一个。

struct ListOfButtonsView: View {
    let buttonNames = ["Button 1", "Button 2", "Button 3"]
    var body: some View {
        NavigationView { /// here!
            VStack {
                ForEach(0..<buttonNames.count) { button in
                    IndividualButtonView()
                }
            }
        }
    }
}

struct IndividualButtonView: View {
    var body: some View { /// remove `NavigationView`
        NavigationLink(destination: CirclesView()) {
            VStack {
                Text("Button")
                    .font(.largeTitle)
                    .padding(32)
            }
            .frame(maxWidth: .infinity)
            .foregroundColor(.white)
            .background(Color.red)
            .cornerRadius(12)
            .navigationBarHidden(true)
            .padding()
        }
    }
}

结果：

SwiftUI：容器中的 NavigationView

SwiftUI: NavigationView in containers

swift

swiftui

swiftui-navigationlink

swiftui-navigationview