SwiftUI自定义Tab Bar开发求助：新手不知如何入手

1. 先定义Tab项的数据结构 #

把每个Tab需要的图标、选中状态图标、对应视图整理成枚举，方便统一管理：

enum TabItem: CaseIterable {
    case home, explore, profile, settings
    
    // 未选中状态图标
    var icon: String {
        switch self {
        case .home: return "house"
        case .explore: return "magnifyingglass"
        case .profile: return "person"
        case .settings: return "gear"
        }
    }
    
    // 选中状态图标
    var selectedIcon: String {
        switch self {
        case .home: return "house.fill"
        case .explore: return "magnifyingglass.circle.fill"
        case .profile: return "person.fill"
        case .settings: return "gearshape.fill"
        }
    }
    
    // 对应跳转的视图
    var view: some View {
        switch self {
        case .home: HomeView()
        case .explore: ExploreView()
        case .profile: ProfileView()
        case .settings: SettingsView()
        }
    }
}

2. 实现自定义TabBar组件 #

用HStack做底部布局，每个Tab项绑定选中状态，点击时切换：

struct CustomTabBar: View {
    @Binding var selectedTab: TabItem
    
    var body: some View {
        HStack {
            ForEach(TabItem.allCases, id: \.self) { tab in
                Button(action: {
                    selectedTab = tab
                }) {
                    VStack(spacing: 4) {
                        Image(systemName: selectedTab == tab ? tab.selectedIcon : tab.icon)
                            .font(.title2)
                        // 需要显示Tab文字的话，取消下面注释
                        // Text(tab.rawValue.capitalized)
                        //     .font(.caption)
                    }
                    .foregroundColor(selectedTab == tab ? .blue : .gray)
                    .frame(maxWidth: .infinity)
                }
            }
        }
        .padding(.top, 8)
        .padding(.bottom, 16)
        .background(Color.white)
        .shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: -4)
    }
}

3. 主视图整合TabBar与页面切换 #

用@State管理选中的Tab，根据状态切换显示对应视图，底部嵌入自定义TabBar：

struct MainTabView: View {
    @State private var selectedTab: TabItem = .home
    
    var body: some View {
        ZStack(alignment: .bottom) {
            // 显示当前选中的页面
            selectedTab.view
            
            // 底部自定义TabBar
            CustomTabBar(selectedTab: $selectedTab)
        }
        .edgesIgnoringSafeArea(.bottom)
    }
}

// 示例页面视图，替换成你自己的业务视图即可
struct HomeView: View {
    var body: some View {
        Text("首页")
            .font(.largeTitle)
    }
}

struct ExploreView: View {
    var body: some View {
        Text("发现")
            .font(.largeTitle)
    }
}

struct ProfileView: View {
    var body: some View {
        Text("我的")
            .font(.largeTitle)
    }
}

struct SettingsView: View {
    var body: some View {
        Text("设置")
            .font(.largeTitle)
    }
}

关键说明 #

• @Binding用于在TabBar和主视图间同步选中状态，确保点击Tab时页面能同步切换
• 后续新增Tab只需在TabItem枚举里添加case，不用修改布局代码
• 要调整TabBar样式（比如背景色、图标大小、圆角），直接修改CustomTabBar的布局逻辑即可
• 需要页面切换动画的话，给selectedTab.view添加transition和animation修饰符即可

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