SwiftUI中如何通过点击手势显示/隐藏NavigationBar与Tab Bar？

阿华AIGC实验室

2026-4-29

解决SwiftUI中点击视图切换导航栏和TabBar显示/隐藏的问题

我来帮你排查下问题——你现在的代码核心误区在于SwiftUI是数据驱动视图的，直接在手势回调里调用navigationBarHidden(true)这种写法是行不通的。这些视图修饰符本质是返回一个新的视图实例，而不是修改当前视图的状态；只有通过可观察的状态变量让SwiftUI感知到变化，它才会重新计算视图并应用对应的显示逻辑。

第一步：修复导航栏隐藏的问题

我们需要添加状态变量来追踪导航栏的显示状态，然后把修饰符绑定到这个变量上：

struct FirstView: View {
    // 用@State变量控制导航栏显示状态，初始为false（显示）
    @State private var isNavigationBarHidden = false
    
    var body: some View {
        NavigationView {
            ZStack {
                PlayerView()
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture(count: 1) {
                        print("tapped!")
                        // 点击时切换状态
                        isNavigationBarHidden.toggle()
                    }
            }
            // 将导航栏隐藏状态绑定到变量
            .navigationBarHidden(isNavigationBarHidden)
            .navigationBarTitle("", displayMode: .inline)
            // 根据状态动态调整安全区域忽略规则
            .edgesIgnoringSafeArea(isNavigationBarHidden ? [.top, .bottom] : [])
        }
    }
}

第二步：扩展到TabBar的显示/隐藏

如果你的FirstView是嵌套在TabView中的，我们可以用同样的状态逻辑处理TabBar：

iOS 16+ 优雅方案（推荐）

iOS16及以上提供了原生的tabBarHidden修饰符，直接绑定状态变量即可：

// 假设你的主视图是TabView
struct MainTabView: View {
    @State private var selectedTab = 0
    @State private var isNavigationBarHidden = false
    @State private var isTabBarHidden = false
    
    var body: some View {
        TabView(selection: $selectedTab) {
            FirstView(
                isNavigationBarHidden: $isNavigationBarHidden,
                isTabBarHidden: $isTabBarHidden
            )
            .tabItem {
                Image(systemName: "house")
                Text("首页")
            }
            .tag(0)
            // 绑定TabBar隐藏状态
            .tabBarHidden(isTabBarHidden)
            
            // 其他Tab页面
            Text("我的")
                .tabItem {
                    Image(systemName: "person")
                    Text("我的")
                }
                .tag(1)
        }
    }
}

// 修改FirstView，用@Binding接收TabBar状态
struct FirstView: View {
    @Binding var isNavigationBarHidden: Bool
    @Binding var isTabBarHidden: Bool
    
    var body: some View {
        NavigationView {
            ZStack {
                PlayerView()
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture(count: 1) {
                        print("tapped!")
                        // 同时切换两个栏的状态
                        isNavigationBarHidden.toggle()
                        isTabBarHidden.toggle()
                    }
            }
            .navigationBarHidden(isNavigationBarHidden)
            .navigationBarTitle("", displayMode: .inline)
            .edgesIgnoringSafeArea(isNavigationBarHidden ? [.top, .bottom] : [])
        }
    }
}

iOS 15及以下兼容方案

如果需要兼容旧版本系统，可以通过UIKit的外观代理控制TabBar，但要注意这是全局修改，需要在合适的时机恢复：

// 在FirstView的手势回调中添加：
.onTapGesture(count: 1) {
    print("tapped!")
    isNavigationBarHidden.toggle()
    // 直接修改TabBar的显示状态
    UITabBar.appearance().isHidden = !UITabBar.appearance().isHidden
}