SwiftUI中如何隐藏TabBar同时保留标签导航功能？

这里提供两种可行的解决方案，适配你的需求：

方法一：SwiftUI原生Toolbar控制（推荐） #

通过给TabMenuView添加控制参数，将TabView嵌套在NavigationStack中（同时隐藏导航栏），利用Toolbar修饰符精准控制TabBar的显示状态：

// 父视图代码
var body: some View {
    GeometryReader { geometry in
        HStack(spacing: 0) {
            if geometry.size.width > 900 {
                // 侧菜单实现
                SideMenuView(selectedTab: $route)
            }
            TabMenuView(activeTab: $route, hideTabBar: geometry.size.width > 900)
                .frame(maxWidth: .infinity)
        }
    }
}

// 修改后的TabMenuView
struct TabMenuView: View {
    @Binding var activeTab: Route
    let hideTabBar: Bool // 新增控制TabBar显示的参数

    var body: some View {
        NavigationStack {
            TabView(selection: $activeTab) {
                // 你的各个Tab项示例
                HomeView()
                    .tag(Route.home)
                ProfileView()
                    .tag(Route.profile)
                // ...其他Tab页面
            }
            // 根据参数切换TabBar显示/隐藏
            .toolbar(hideTabBar ? .hidden : .visible, for: .tabBar)
            // 隐藏不需要的导航栏
            .navigationBarHidden(true)
        }
    }
}

原理：NavigationStack会将TabBar纳入SwiftUI的Toolbar系统管理，此时.toolbar(.hidden, for: .tabBar)可以正确生效，同时隐藏导航栏不会对界面造成额外影响。

方法二：UIKit外观代理（全局控制） #

如果不想嵌套NavigationStack，可以通过UIKit的外观代理直接控制TabBar的显示，但注意此方法是全局生效的，适合APP只有一个TabView的场景：

// 父视图代码
var body: some View {
    GeometryReader { geometry in
        HStack(spacing: 0) {
            if geometry.size.width > 900 {
                SideMenuView(selectedTab: $route)
            }
            TabMenuView(activeTab: $route)
                .frame(maxWidth: .infinity)
        }
        .onAppear {
            // 初始化时设置TabBar状态
            UITabBar.appearance().isHidden = geometry.size.width > 900
        }
        .onChange(of: geometry.size.width) { newWidth in
            // 屏幕尺寸变化（如旋转）时更新状态
            UITabBar.appearance().isHidden = newWidth > 900
        }
    }
}

// TabMenuView保持原有结构
struct TabMenuView: View {
    @Binding var activeTab: Route

    var body: some View {
        TabView(selection: $activeTab) {
            // 你的Tab项
        }
    }
}

额外注意事项 #

• 确保侧菜单的点击事件与activeTab绑定同步，这样点击侧菜单就能直接切换TabView的内容。
• 测试屏幕旋转场景，验证TabBar的显示状态能随屏幕尺寸变化正确切换。

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