在Flutter开发中，TabBar是一个常见的组件，用于导航和组织内容。然而，当你希望实现一些独特的设计，比如自定义背景颜色和进度条时，原生的TabBar组件可能无法满足你的需求。本文将通过实例展示如何自定义一个TabBar，使其背景颜色和进度条能够根据数据状态动态变化。设计目标我们希望实现如下的TabBar效果：每个Tab都有独立的背景颜色。背景颜色根据Tab的可用性(isAvailable)和完成状态(isCompleted)动态变化。可用但未完成的Tab显示灰色背景。已完成的Tab显示绿色进度条。不可用的Tab不显示背景色。实现思路我们将使用Stack来叠加多个Container以实现这种自定义布局：基础布局：使用Row和Expanded来控制每个Tab的宽度。背景颜色：通过Container的decoration属性设置背景颜色。进度条：使用一个Stack来叠加进度条和Tab的背景。动态控制