如何实现带进度条背景的自定义Flutter TabBar？

核心思路 #

原生TabView的TabBar组件样式定制自由度较低，无法单独控制单个Tab的背景进度条状态，因此推荐通过自定义TabBar容器+视图切换逻辑来实现需求。

SwiftUI 实现示例 #

1. 定义Tab数据模型 #

先创建包含Tab状态的模型，用来控制每个Tab的可用性、完成状态：

struct TabItemData: Identifiable {
    let id = UUID()
    let title: String
    let iconName: String
    var isAvailable: Bool
    var isCompleted: Bool
}

2. 自定义TabBar组件 #

实现底部的TabBar，根据每个Tab的isAvailable和isCompleted渲染对应的进度条背景：

struct CustomTabBar: View {
    let tabs: [TabItemData]
    @Binding var selectedTabIndex: Int
    
    var body: some View {
        HStack(spacing: 0) {
            ForEach(Array(tabs.enumerated()), id: \.element.id) { index, tab in
                // 只渲染可用的Tab
                if tab.isAvailable {
                    Button(action: {
                        selectedTabIndex = index
                    }) {
                        VStack(spacing: 4) {
                            Image(systemName: tab.iconName)
                                .foregroundColor(selectedTabIndex == index ? .white : .gray)
                            Text(tab.title)
                                .font(.caption)
                                .foregroundColor(selectedTabIndex == index ? .white : .gray)
                        }
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 8)
                        // 进度条背景：选中/完成时绿色，未完成可用时灰色
                        .background(
                            VStack {
                                Spacer()
                                Rectangle()
                                    .frame(height: 4)
                                    .foregroundColor(tab.isCompleted || selectedTabIndex == index ? .green : .gray)
                            }
                        )
                    }
                }
            }
            // 不可用的Tab不占用布局位置
        }
        .background(Color.black)
        .frame(height: 60)
    }
}

3. 主容器视图 #

将自定义TabBar和对应内容视图绑定，实现切换逻辑：

struct CustomTabContainerView: View {
    @State private var selectedTabIndex = 0
    // 模拟Tab数据
    private let tabs: [TabItemData] = [
        TabItemData(title: "Step1", iconName: "1.circle", isAvailable: true, isCompleted: true),
        TabItemData(title: "Step2", iconName: "2.circle", isAvailable: true, isCompleted: false),
        TabItemData(title: "Step3", iconName: "3.circle", isAvailable: true, isCompleted: false),
        TabItemData(title: "Step4", iconName: "4.circle", isAvailable: false, isCompleted: false)
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            // 内容区域：根据选中索引切换视图
            ZStack {
                if selectedTabIndex == 0 {
                    Text("Step 1 Content")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.blue)
                } else if selectedTabIndex == 1 {
                    Text("Step 2 Content")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.orange)
                } else if selectedTabIndex == 2 {
                    Text("Step 3 Content")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(Color.purple)
                }
                // 不可用的Tab不显示对应内容
            }
            
            // 自定义TabBar
            CustomTabBar(tabs: tabs, selectedTabIndex: $selectedTabIndex)
        }
        .ignoresSafeArea(.all, edges: .bottom)
    }
}

UIKit 实现思路 #

如果使用UIKit，可以通过以下方式实现：

• 创建自定义UITabBar子类，重写layoutSubviews方法，为每个UITabBarItem添加对应的进度条背景视图。
• 根据每个Tab的isAvailable和isCompleted状态，动态调整进度条的颜色和显示/隐藏。
• 结合UITabBarController，通过代理或KVO监听选中状态变化，实时更新样式。

关键注意点 #

• 动态更新状态：当Tab的isAvailable或isCompleted属性变化时，SwiftUI中使用@Published或@State触发刷新，UIKit中调用setNeedsLayout更新布局。
• 交互逻辑：不可用的Tab要禁用点击事件，避免用户切换到不可用的视图。
• 屏幕适配：确保TabBar在不同尺寸设备上的布局均匀，进度条宽度自适应。

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