SwiftUI TabItem样式修改无效，如何自定义中间TabItem？

问题原因 #

SwiftUI 的tabItem是对 UIKit UITabBarItem的封装，系统会强制统一所有 TabItem 的尺寸、样式规则，直接给tabItem内部的视图添加frame、font等修饰会被系统布局逻辑覆盖，无法生效。另外你代码里多个tabItem的 Label 标题重复为"Home"属于笔误，但不是样式不生效的核心原因。

解决方案 #

方案一：自定义 TabBar（推荐，完全可控） #

通过隐藏系统默认 TabBar，自定义底部导航栏视图，实现中间 Item 的特殊样式：

1. 修改ContentView，绑定选中标签并隐藏系统 TabBar：

struct ContentView: View {
    @State var workoutPlansManager = WorkoutPlansManager()
    @State var exerciseManager = ExercisesManager()
    @State private var selectedTab = 0 // 绑定选中标签索引

    init(){
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor : UIColor.white]
        // 隐藏系统默认TabBar
        UITabBar.appearance().isHidden = true
    }

    var body: some View {
        NavigationStack {
            ZStack(alignment: .bottom) {
                // 根据选中标签切换页面
                switch selectedTab {
                case 0:
                    HomeScreen(workoutPlansManager: workoutPlansManager, exerciseManager: exerciseManager)
                case 1:
                    WorkoutPlansScreen(workoutPlansManager: workoutPlansManager, exerciseManager: exerciseManager)
                case 2:
                    AiScreen()
                case 3:
                    ExercisesScreen(exercisesManager: exerciseManager)
                case 4:
                    TimerScreen()
                default:
                    EmptyView()
                }

                // 自定义TabBar
                CustomTabBar(selectedTab: $selectedTab)
            }
        }
        .foregroundColor(.white)
    }
}

2. 创建自定义CustomTabBar视图：

struct CustomTabBar: View {
    @Binding var selectedTab: Int
    // 定义每个Tab的图标和标题
    let tabItems = [
        (icon: "house", title: "Home"),
        (icon: "house", title: "Plans"),
        (icon: "openai", title: ""),
        (icon: "house", title: "Exercises"),
        (icon: "house", title: "Timer")
    ]

    var body: some View {
        HStack(spacing: 0) {
            ForEach(tabItems.indices, id: \.self) { index in
                if index == 2 {
                    // 中间特殊样式的TabItem
                    Button(action: {
                        selectedTab = index
                    }) {
                        Image(tabItems[index].icon)
                            .resizable()
                            .scaledToFit()
                            .frame(width: 50, height: 50) // 更大尺寸
                            .padding(10)
                            .background(Circle().fill(.orange)) // 橙色背景
                    }
                    .padding(.vertical, 8) // 让中间Item向上突出
                } else {
                    // 普通TabItem
                    Button(action: {
                        selectedTab = index
                    }) {
                        VStack(spacing: 4) {
                            Image(systemName: tabItems[index].icon)
                                .font(.title2)
                            Text(tabItems[index].title)
                                .font(.caption)
                        }
                        .foregroundColor(selectedTab == index ? .white : .gray)
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 12)
                }
            }
        }
        .background(Color.black)
        .shadow(color: .black.opacity(0.3), radius: 8, x: 0, y: -2)
    }
}

方案二：叠加视图覆盖系统 TabBar（快速实现） #

保留系统 TabBar 功能，在上方叠加自定义中间按钮，隐藏系统中间 TabItem 的内容：

struct ContentView: View {
    @State var workoutPlansManager = WorkoutPlansManager()
    @State var exerciseManager = ExercisesManager()
    @State private var selectedTab = 0

    init(){
        UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor : UIColor.white]
        UITabBar.appearance().barTintColor = UIColor.black
        UITabBar.appearance().backgroundColor = UIColor.black
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    }

    var body: some View {
        NavigationStack {
            ZStack(alignment: .bottom) {
                TabView(selection: $selectedTab) {
                    HomeScreen(workoutPlansManager: workoutPlansManager, exerciseManager: exerciseManager)
                        .tabItem { Label("Home", systemImage: "house") }
                        .tag(0)

                    WorkoutPlansScreen(workoutPlansManager: workoutPlansManager, exerciseManager: exerciseManager)
                        .tabItem { Label("Plans", systemImage: "house") }
                        .tag(1)

                    AiScreen()
                        .tabItem { EmptyView() } // 系统TabItem留空占位
                        .tag(2)

                    ExercisesScreen(exercisesManager: exerciseManager)
                        .tabItem { Label("Exercises", systemImage: "house") }
                        .tag(3)

                    TimerScreen()
                        .tabItem { Label("Timer", systemImage: "house") }
                        .tag(4)
                }

                // 叠加自定义中间按钮
                Button(action: {
                    selectedTab = 2
                }) {
                    Image("openai")
                        .resizable()
                        .scaledToFit()
                        .frame(width: 50, height: 50)
                        .padding(10)
                        .background(Circle().fill(.orange))
                }
                .padding(.bottom, 12) // 调整位置避免被系统TabBar遮挡
            }
        }
        .foregroundColor(.white)
    }
}

注意事项 #

• 确保openai图片已添加到项目的Assets.xcassets资源库中
• 方案一完全可控所有样式，适合复杂需求；方案二保留系统 TabBar 默认行为（如滑动切换），实现更快捷
• 建议修正原代码中重复的 TabItem 标题，提升用户体验

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