SwiftUI如何在指定页面隐藏导航栏且不影响其他页面显隐

问题根源 #

navigationBarHidden 修饰符默认作用于整个 NavigationView 的导航栈，仅在前一个页面设置隐藏未做状态重置时，后续所有入栈的页面都会继承隐藏状态。

解决方案 #

方案1：iOS 13+ 页面生命周期配对控制（兼容旧版本）

在需要隐藏导航栏的页面通过 onAppear 和 onDisappear 配对修改导航栏状态，离开页面时自动恢复显示：

// 需要隐藏导航栏的子页面
struct FirstSubView: View {
    var body: some View {
        Text("第一个子页面（隐藏导航栏）")
            .navigationTitle("首页")
            .onAppear {
                // 进入页面时隐藏导航栏
                UINavigationBar.appearance().isHidden = true
            }
            .onDisappear {
                // 离开页面时恢复显示
                UINavigationBar.appearance().isHidden = false
            }
    }
}

// 后续页面不需要额外配置，正常显示导航栏
struct SecondSubView: View {
    var body: some View {
        Text("第二个子页面（正常显示导航栏）")
            .navigationTitle("详情页")
    }
}

方案2：iOS 16+ 官方推荐稳定方案

iOS 16 之后苹果废弃了 navigationBarHidden，改用 toolbar 修饰符，作用范围仅为当前页面，不需要手动处理状态恢复，不会影响其他页面：

// 需要隐藏导航栏的子页面
struct FirstSubView: View {
    var body: some View {
        Text("第一个子页面（隐藏导航栏）")
            .toolbar(.hidden, for: .navigationBar)
            .navigationTitle("首页")
    }
}

方案3：全版本全局状态控制

如果你的App需要兼容多iOS版本，可以通过自定义环境变量统一管控导航栏显隐：

1. 根页面定义全局状态和自定义环境变量

// 自定义环境变量
private struct IsNavigationBarHiddenKey: EnvironmentKey {
    static let defaultValue: Binding<Bool> = .constant(false)
}
extension EnvironmentValues {
    var isNavigationBarHidden: Binding<Bool> {
        get { self[IsNavigationBarHiddenKey.self] }
        set { self[IsNavigationBarHiddenKey.self] = newValue }
    }
}

// 根页面配置
struct RootView: View {
    @State private var navBarHidden = false
    
    var body: some View {
        NavigationView {
            // 你的页面跳转逻辑
            FirstSubView()
        }
        .navigationBarTitle("ABCScreen", displayMode: .inline)
        .navigationViewStyle(StackNavigationViewStyle())
        .navigationBarHidden(navBarHidden)
        .environment(\.isNavigationBarHidden, $navBarHidden)
    }
}

2. 需要隐藏导航栏的子页面修改环境变量即可

struct FirstSubView: View {
    @Environment(\.isNavigationBarHidden) private var navBarHidden
    
    var body: some View {
        Text("第一个子页面")
            .onAppear {
                navBarHidden.wrappedValue = true
            }
            .onDisappear {
                navBarHidden.wrappedValue = false
            }
    }
}

注意事项 #

不要将导航栏显隐修饰符加在 NavigationView 本身，要加在 NavigationView 内部的子页面上，避免全局生效。

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