SwiftUI自定义TabBar实现tabItem上下双图夹文字布局

SwiftUI 原生 .tabItem 是系统高度封装的固定布局组件，仅支持「单图标+单文字」的标准Tab结构，你传入的ZStack/VStack多视图嵌套、多图标堆叠的自定义内容会被系统自动过滤，只会保留第一个被识别到的Image和Text元素，这就是你三种实现方案都无法生效的核心原因。

注意：不要尝试在原生.tabItem闭包内编写复杂自定义布局，系统始终会按预设规则过滤视图，无法渲染自定义堆叠结构。

要实现「顶部图标+中间文字+底部选中图标」的自定义布局，必须放弃系统原生tabItem的渲染逻辑，手动隐藏原生TabBar，在底部叠加完全自定义的TabBar视图，自行管理选中状态和页面切换。

完整实现代码 #

1. 定义Tab配置与状态 #

// 统一管理所有Tab项的配置
enum AppTab: Int, CaseIterable {
    case subscription, shop, home
    
    var title: String {
        switch self {
        case .subscription: return "Subscription"
        case .shop: return "Shop"
        case .home: return "Home"
        }
    }
    
    var topIcon: String {
        switch self {
        case .subscription: return ImageName.diamondFill.rawValue
        case .shop: return ImageName.storeLine.rawValue
        case .home: return ImageName.homeLine.rawValue
        }
    }
    
    var bottomIndicator: String {
        return ImageName.tapSelected.rawValue
    }
}

struct MainTabContainer: View {
    @State private var selectedTab: AppTab = .home
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 主页面内容区
            TabView(selection: $selectedTab) {
                HideNavbarOf(view: HomeView())
                    .tag(AppTab.subscription)
                HideNavbarOf(view: Text("AskQuestion"))
                    .tag(AppTab.shop)
                HideNavbarOf(view: Text("Chat"))
                    .tag(AppTab.home)
            }
            // 隐藏系统原生TabBar
            .hideNativeTabBar()
            
            // 自定义TabBar
            customTabBar
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

2. 实现自定义TabBar布局 #

extension MainTabContainer {
    private var customTabBar: some View {
        HStack(spacing: 0) {
            ForEach(AppTab.allCases, id: \.rawValue) { tab in
                singleTabItem(for: tab)
                    .frame(maxWidth: .infinity)
                    .contentShape(Rectangle())
                    .onTapGesture {
                        withAnimation(.easeInOut(duration: 0.2)) {
                            selectedTab = tab
                        }
                    }
            }
        }
        .padding(.top, 12)
        .padding(.bottom, getSafeAreaBottomInset() == 0 ? 12 : getSafeAreaBottomInset())
        .background(Color.black) // 替换为你的TabBar实际背景色
    }
    
    @ViewBuilder
    private func singleTabItem(for tab: AppTab) -> some View {
        let isSelected = selectedTab == tab
        VStack(spacing: 4) {
            // 顶部功能图标
            Image(tab.topIcon)
                .resizable()
                .scaledToFit()
                .frame(width: 25, height: 25)
                .foregroundColor(isSelected ? .white : .gray)
            
            // 中间功能文字
            Text(tab.title)
                .font(.custom(Popins.regular.rawValue, size: 11))
                .foregroundColor(isSelected ? .white : .gray)
            
            // 底部选中指示图标
            if isSelected {
                Image(tab.bottomIndicator)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 25, height: 25)
            } else {
                // 未选中时留等高占位，避免切换时布局跳动
                Color.clear.frame(width: 25, height: 25)
            }
        }
    }
}

// 工具：隐藏原生TabBar的修饰符
extension View {
    func hideNativeTabBar() -> some View {
        Group {
            if #available(iOS 16.0, *) {
                self.toolbar(.hidden, for: .tabBar)
            } else {
                self.onAppear {
                    UITabBar.appearance().isHidden = true
                }
            }
        }
    }
}

// 工具：获取底部安全区高度
func getSafeAreaBottomInset() -> CGFloat {
    guard let scene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
          let window = scene.windows.first else {
        return 0
    }
    return window.safeAreaInsets.bottom
}

• 如果你不需要TabView自带的左右滑动切页效果，可以直接用switch selectedTab渲染对应页面，性能比TabView更可控
• 点击区域用contentShape(Rectangle())修饰，保证整个Tab项的空白区域也能响应点击
• 如果需要给TabBar加毛玻璃、阴影效果，直接在customTabBar的background层修改即可，不受系统TabBar的样式限制

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