SwiftUI iOS：自定义TabBar跳转指定页面时的隐藏方法

问题描述 #

我自行实现了一个自定义TabBar，代码如下：

struct MainView: View
{
    @State var selectedIndex = 0
    let icons = ["menucard", "house"]
    let iconsNames = ["meniu", "oferte"]


var body: some View{
    
    VStack(spacing: 0){

        ZStack{
            switch selectedIndex{
            case 0:
                MeniuListView()
            case 1:
                ProfileView()
              }

        Divider()
        HStack{
            ForEach(0..<2, id: \.self){number in
                Spacer()
                Button(action: {
                    self.selectedIndex=number

                }, label: {
                    VStack(spacing: 3){
                    Image(systemName: icons[number])
                            .font(.system(size: 25,
                                         weight: .regular,
                                         design: .default))
                           
                 }
              }
          }
}

目前遇到的问题是：从ProfileShopView跳转至LoginView时，自定义TabBar并未隐藏，跳转相关代码如下：

struct ProfileShopView: View {
       @State var goToNextScreen : Int? = nil
        var body: some View {
              NavigationView{
    
                   VStack{
        
                       Form{
                           }
                 
                    NavigationLink(destination: LoginView().navigationBarHidden(true), tag: 1, selection: $goToNextScreen)
                           {    
                              EmptyView()
                           }
                      Button(action: {
                
                           goToNextScreen=1
                           UserDefaults.standard.set(false, forKey: "isLogin")
                
                      } //need to hide the tab bar when navigating to login view
          }
    }

请问如何实现跳转至特定页面时隐藏自定义TabBar？最佳实现方案是什么？

最佳解决方案 #

由于你使用的是自定义TabBar（而非系统TabView），系统自带的导航API无法直接控制它的显示隐藏，需要手动维护状态并跨视图传递控制逻辑，推荐以下实现方案：

1. 统一导航结构，移除嵌套NavigationView #

首先删除子视图中嵌套的NavigationView，在MainView外层统一添加一个NavigationView，避免多层导航栈引发的状态混乱。

2. 给自定义TabBar添加显示隐藏控制 #

在MainView中新增状态变量，通过条件渲染控制TabBar是否展示：

struct MainView: View {
    @State var selectedIndex = 0
    let icons = ["menucard", "house"]
    let iconsNames = ["meniu", "oferte"]
    // 新增：控制TabBar显示隐藏的状态
    @State private var isTabBarHidden = false

    var body: some View {
        // 外层统一添加NavigationView
        NavigationView {
            VStack(spacing: 0) {
                ZStack {
                    switch selectedIndex {
                    case 0:
                        MeniuListView()
                    case 1:
                        ProfileView()
                    }
                }

                // 条件渲染：仅当isTabBarHidden为false时显示TabBar
                if !isTabBarHidden {
                    Divider()
                    HStack {
                        ForEach(0..<2, id: \.self) { number in
                            Spacer()
                            Button(action: {
                                self.selectedIndex = number
                            }, label: {
                                VStack(spacing: 3) {
                                    Image(systemName: icons[number])
                                        .font(.system(size: 25, weight: .regular, design: .default))
                                }
                            })
                            Spacer()
                        }
                    }
                }
            }
            // 将控制状态通过环境变量传递给所有子视图
            .environment(\.tabBarHidden, $isTabBarHidden)
        }
    }
}

3. 定义自定义环境键，实现跨视图状态传递 #

创建自定义环境键，让子视图可以访问并修改TabBar的显示状态：

// 自定义环境键，用于传递TabBar隐藏状态的Binding
private struct TabBarHiddenKey: EnvironmentKey {
    static let defaultValue: Binding<Bool> = .constant(false)
}

extension EnvironmentValues {
    var tabBarHidden: Binding<Bool> {
        get { self[TabBarHiddenKey.self] }
        set { self[TabBarHiddenKey.self] = newValue }
    }
}

4. 在子视图中控制TabBar的显示隐藏 #

修改ProfileShopView，移除嵌套的NavigationView，通过环境变量控制跳转时隐藏TabBar，返回时自动恢复：

struct ProfileShopView: View {
    @State var goToNextScreen: Int? = nil
    // 通过环境变量获取TabBar的控制状态
    @Environment(\.tabBarHidden) var isTabBarHidden

    var body: some View {
        VStack {
            Form {
                // 你的表单内容
            }

            NavigationLink(
                destination: LoginView()
                    .navigationBarHidden(true)
                    // 从LoginView返回时，恢复TabBar显示
                    .onDisappear {
                        isTabBarHidden.wrappedValue = false
                    },
                tag: 1,
                selection: $goToNextScreen
            ) {
                EmptyView()
            }

            Button(action: {
                // 跳转前隐藏TabBar
                isTabBarHidden.wrappedValue = true
                goToNextScreen = 1
                UserDefaults.standard.set(false, forKey: "isLogin")
            }) {
                Text("前往登录")
            }
        }
    }
}

方案优势 #

• 状态统一维护在MainView，避免分散管理导致的逻辑混乱
• 通过环境变量跨层级传递控制逻辑，无需手动层层传递Binding
• 利用SwiftUI生命周期回调（onDisappear）自动恢复TabBar显示，逻辑清晰且易维护

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