如何一次只有一个导航链接

Question

我创建了一个程序，帮助我了解我仍在学习的导航链接的基础知识。 我想知道如何摆脱相互堆叠的导航链接。

import SwiftUI

struct RedOneView: View {
    var body: some View {
        NavigationView{
         
            VStack{
                CircleViewNumber(color: .red, number: 1)
                    .navigationTitle("Red one")
                    .offset(y: -60)
                
                NavigationLink(destination: BlueTwoView(color: .orange), label: {
                        Text("Blue View")
                        .bold()
                        .frame(width: 200, height: 50)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
            })
            
        }
        
    }
}
    
struct CircleViewNumber: View{
        var color: Color
        var number: Int
        
        var body: some View{
            ZStack{
                Circle()
                    .frame(width: 200, height: 200)
                    .foregroundColor(color)
                Text("\(number)")
                    .foregroundColor(.white)
                    .font(.system(size: 70, weight: .bold))
                
        }
    }
}
    
    struct test: View{
        var number: Int
        var body: some View{
            
            ZStack{
                Circle()
                    .scale(1.5)
                    .foregroundColor(.blue)
            Text("\(number)")
                    
            }
        }
        
    }
    
    struct BlueTwoView: View {
        var color: Color
        var body: some View {
            NavigationView{
                
                VStack{
                    CircleViewNumber(color: color, number: 2)
                        .navigationTitle("Blue two")
                        .offset(y: -60)
                    
                    NavigationLink(destination: GreenThreeView(), label: {
                        Text("Next Screen")
                    })
                    
                }
                
            }
        }
    }
    
    struct GreenThreeView: View {
       
        var body: some View {
            NavigationView{
                
                VStack{
                    CircleViewNumber(color: .green, number: 2)
                        .navigationTitle("Green three")
                        .offset(y: -60)
                    
                    NavigationLink(destination: test(number: 5), label: {
                        Text("Next Screen")
                    })
                    
                }
                
            }
        }
    }
   
    
struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            RedOneView()
        }
    }
}

那么我 go 如何摆脱导航链接，这样你就不能只跳到第一个链接（红色链接），而是有一个按钮，你必须 go 每个屏幕单独。

Answer 1

您应该在导航堆栈中只使用一个NavigationView 。 因此，您必须摆脱组件中嵌套的NavigationView 。 除了RedOneView之外，您可以简单地在所有地方删除NavigationView 。

但我建议使用NavigationView创建RootView组件，并在所有子组件中删除NavigationView

struct RootView: View {
    var body: some View {
        NavigationView {
           RedOneView()
        }
    }
}

struct RedOneView: View {
    var body: some View {
        VStack {
            CircleViewNumber(color: .red, number: 1)
                .navigationTitle("Red one")
                .offset(y: -60)
            
            NavigationLink(destination: BlueTwoView(color: .orange), label: {
                    Text("Blue View")
                    .bold()
                    .frame(width: 200, height: 50)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
        })
        
    }
}

struct BlueTwoView: View {
    var color: Color
    var body: some View {
        VStack {
            CircleViewNumber(color: color, number: 2)
                .navigationTitle("Blue two")
                .offset(y: -60)
            
            NavigationLink(destination: GreenThreeView(), label: {
                Text("Next Screen")
            })
            
        }
    }
}
//...