如何在Flutter中切换TabBar选中项时修改图标背景色？

要实现选中TabBar的Tab时为图标添加背景色的效果，你需要自定义Tab的内容并结合TabController监听选中状态，以下是具体修改方案：

核心思路 #

1. 通过TabController监听当前选中的Tab索引，触发UI更新
2. 自定义每个Tab的布局，用Container包裹图标，根据选中状态切换背景色
3. 移除TabBar默认的下划线指示器，改用图标背景作为选中标识

修改后的完整代码示例 #

class CustomTabBarScreen extends StatefulWidget {
  const CustomTabBarScreen({super.key});

  @override
  State<CustomTabBarScreen> createState() => _CustomTabBarScreenState();
}

class _CustomTabBarScreenState extends State<CustomTabBarScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 初始化TabController，长度对应Tab数量
    _tabController = TabController(length: 5, vsync: this);
    // 监听选中状态变化，触发UI刷新
    _tabController.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          dividerHeight: 0,
          padding: EdgeInsets.zero,
          // 移除默认下划线指示器
          indicator: const BoxDecoration(),
          indicatorPadding: EdgeInsets.zero,
          labelPadding: EdgeInsets.zero,
          automaticIndicatorColorAdjustment: false,
          unselectedLabelStyle: const TextStyle(color: Color(0xFFCCCCCC)),
          tabs: [
            _buildTab(
              text: StringConstant.cricketTitle,
              icon: const Icon(Icons.sports_cricket_outlined),
              index: 0,
            ),
            _buildTab(
              text: StringConstant.footBallTitle,
              icon: const Icon(Icons.sports_soccer),
              index: 1,
            ),
            _buildTab(
              text: StringConstant.kabaddiTitle,
              icon: const Icon(Icons.sports_kabaddi_outlined),
              index: 2,
            ),
            _buildTab(
              text: StringConstant.basketBallTitle,
              icon: const Icon(Icons.sports_basketball_outlined),
              index: 3,
            ),
            _buildTab(
              text: StringConstant.volleyBallTitle,
              icon: const Icon(Icons.sports_volleyball_outlined),
              index: 4,
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(child: Text("板球")),
          Center(child: Text("足球")),
          Center(child: Text("卡巴迪")),
          Center(child: Text("篮球")),
          Center(child: Text("排球")),
        ],
      ),
    );
  }

  // 自定义Tab组件，根据选中状态切换样式
  Widget _buildTab({required String text, required Icon icon, required int index}) {
    final isSelected = _tabController.index == index;
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          padding: const EdgeInsets.all(8),
          // 选中时显示背景色，未选中时透明
          decoration: BoxDecoration(
            color: isSelected ? Colors.white.withOpacity(0.2) : Colors.transparent,
            borderRadius: BorderRadius.circular(12), // 圆角匹配目标样式
          ),
          child: Icon(
            icon.icon,
            color: isSelected ? Colors.white : const Color(0xFFCCCCCC),
          ),
        ),
        const SizedBox(height: 4),
        Text(
          text,
          style: TextStyle(
            color: isSelected ? Colors.white : const Color(0xFFCCCCCC),
          ),
        ),
      ],
    );
  }
}

关键调整说明 #

• TabController监听：通过addListener实时获取选中索引，更新UI状态
• 自定义Tab布局：用Column包裹图标和文字，图标外层加Container控制背景
• 样式控制：根据isSelected变量分别设置背景色、图标颜色、文字颜色
• 移除默认指示器：将TabBar的indicator设为空BoxDecoration，避免默认下划线干扰

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