SwiftUI导航优化：消除导航栏堆叠并实现单步递进导航

问题分析 #

当前代码存在两个核心问题：

1. 导航栏堆叠：每个子视图（BlueTwoView、GreenThreeView）都嵌套了NavigationView，导致进入子页面后出现多层导航栏。
2. 无法控制导航流程：需要实现线性递进的导航逻辑，用户必须按顺序访问页面，不能直接跳转到中间页面。

解决方案 #

1. 修复导航栏堆叠问题 #

SwiftUI中NavigationView是全局导航容器，只需要在根视图中声明一次，所有子视图直接通过NavigationLink跳转即可，不需要重复嵌套。

2. 实现单步递进导航 #

通过状态变量控制每个页面的访问权限：只有当用户访问过前一个页面后，才允许进入下一个页面。同时设置专属入口页，所有后续页面必须通过依次跳转到达。

完整修复代码 #

import SwiftUI

// 导航入口页：用户必须从这里开始访问后续页面
struct EntryView: View {
    @State private var canEnterRedOne = false
    
    var body: some View {
        NavigationView {
            VStack(spacing: 40) {
                Text("导航首页")
                    .font(.largeTitle)
                    .bold()
                
                NavigationLink(
                    destination: RedOneView(canEnterBlueTwo: $canEnterRedOne),
                    isActive: $canEnterRedOne,
                    label: {
                        Text("进入Red页面")
                            .bold()
                            .frame(width: 200, height: 50)
                            .background(Color.red)
                            .foregroundColor(.white)
                            .cornerRadius(10)
                    }
                )
            }
            .navigationTitle("导航入口")
        }
    }
}

struct RedOneView: View {
    @Binding var canEnterBlueTwo: Bool
    @State private var canEnterGreenThree = false
    
    var body: some View {
        VStack{
            CircleViewNumber(color: .red, number: 1)
                .offset(y: -60)
            
            NavigationLink(
                destination: BlueTwoView(canEnterGreenThree: $canEnterGreenThree),
                isActive: $canEnterGreenThree,
                label: {
                    Text("进入Blue页面")
                        .bold()
                        .frame(width: 200, height: 50)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            )
        }
        .navigationTitle("Red one")
    }
}

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 TestView: View{
    var number: Int
    var body: some View{
        ZStack{
            Circle()
                .scale(1.5)
                .foregroundColor(.blue)
            Text("\(number)")
                .foregroundColor(.white)
                .font(.system(size: 70, weight: .bold))
        }
        .navigationTitle("Final Page")
    }
}

struct BlueTwoView: View {
    @Binding var canEnterGreenThree: Bool
    @State private var canEnterTest = false
    
    var body: some View {
        VStack{
            CircleViewNumber(color: .orange, number: 2)
                .offset(y: -60)
            
            NavigationLink(
                destination: GreenThreeView(canEnterTest: $canEnterTest),
                isActive: $canEnterTest,
                label: {
                    Text("进入Green页面")
                        .bold()
                        .frame(width: 200, height: 50)
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            )
        }
        .navigationTitle("Blue two")
    }
}

struct GreenThreeView: View {
    @Binding var canEnterTest: Bool
    
    var body: some View {
        VStack{
            CircleViewNumber(color: .green, number: 3)
                .offset(y: -60)
            
            NavigationLink(
                destination: TestView(number: 5),
                isActive: $canEnterTest,
                label: {
                    Text("进入Final页面")
                        .bold()
                        .frame(width: 200, height: 50)
                        .background(Color.purple)
                        .foregroundColor(.white)
                        .cornerRadius(10)
                }
            )
        }
        .navigationTitle("Green three")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        EntryView()
    }
}

关键修改说明 #

• 移除嵌套NavigationView：仅在EntryView（根视图）中保留一个NavigationView，所有子视图直接使用VStack布局并通过NavigationLink跳转。
• 状态变量控制导航权限：通过@Binding传递状态变量，确保用户必须依次点击进入下一页，无法直接跳转到中间页面。
• 统一导航标题位置：将navigationTitle添加到子视图的根布局上，确保导航栏显示正确。

原问题截图 #

内容的提问来源于stack exchange，提问作者msalaz03