SwiftUI中返回根页面时出现多个返回按钮的问题

你的问题本质是每次从第三页跳回第一页时，都会创建一个新的FirstScreen实例，而FirstScreen内部又嵌套了NavigationView，这就导致导航栈不断被嵌套，进而出现返回按钮叠加的情况。即使用.navigationBarBackButtonHidden(true)隐藏按钮，导航栏的占位空间依然存在，因为新的导航视图已经被添加到层级中了。

下面是两种彻底解决问题的方案：

方案一：将NavigationView作为根视图，统一管理导航栈 #

把NavigationView（iOS 16+推荐用NavigationStack）放在根层级，所有子页面只作为导航栈的目标视图，不再包含NavigationView。

修改后的代码：

// 根视图，仅初始化一次导航栈
struct RootView: View {
    var body: some View {
        NavigationStack {
            FirstScreen()
        }
    }
}

struct FirstScreen: View {
    var body: some View {
        VStack {
            NavigationLink(destination: SecondScreen()) {
                Text("Go to Second Screen")
            }
        }
        .navigationTitle("First Screen")
    }
}

struct SecondScreen: View {
    var body: some View {
        VStack {
            NavigationLink(destination: ThirdScreen()) {
                Text("Go to Third Screen")
            }
        }
        .navigationTitle("Second Screen")
    }
}

struct ThirdScreen: View {
    @Environment(\.dismiss) private var dismiss
    
    var body: some View {
        VStack {
            // 直接弹出到导航栈最顶部的FirstScreen
            Button("Back to First Screen") {
                dismiss()
                dismiss()
            }
        }
        .navigationTitle("Third Screen")
    }
}

说明：整个App只有一个导航栈，所有页面都在同一层级下。从第三页返回首页时，通过两次dismiss()直接回到初始的FirstScreen实例，不会新增任何导航视图，自然不会出现返回按钮叠加的问题。

方案二：用NavigationPath管理导航路径（iOS 16+） #

如果需要更灵活的导航控制，可以通过NavigationPath跟踪导航栈，直接重置路径回到首页：

struct RootView: View {
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            FirstScreen(path: $path)
                .navigationDestination(for: Screen.self) { screen in
                    switch screen {
                    case .second:
                        SecondScreen(path: $path)
                    case .third:
                        ThirdScreen(path: $path)
                    }
                }
        }
    }
}

// 定义页面枚举，统一管理跳转目标
enum Screen {
    case second, third
}

struct FirstScreen: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        VStack {
            Button("Go to Second Screen") {
                path.append(Screen.second)
            }
        }
        .navigationTitle("First Screen")
    }
}

struct SecondScreen: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        VStack {
            Button("Go to Third Screen") {
                path.append(Screen.third)
            }
        }
        .navigationTitle("Second Screen")
    }
}

struct ThirdScreen: View {
    @Binding var path: NavigationPath
    
    var body: some View {
        VStack {
            Button("Back to First Screen") {
                // 清空导航路径，直接回到首页
                path.removeLast(path.count)
            }
        }
        .navigationTitle("Third Screen")
    }
}

说明：通过NavigationPath可以精确控制导航栈的内容，重置路径后直接回到根视图，彻底避免导航视图嵌套的问题。

关于隐藏导航栏占位空间 #

如果需要完全隐藏导航栏（包括占位空间），可以在对应页面添加：

.navigationBarHidden(true)

注意要确保该页面处于正确的导航栈层级下，否则修饰符可能无效。

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