如何实现Flutter TabBar自定义选中标签的颜色差异化显示

你的问题核心是TabBar的indicator仅作为叠加在标签上的指示器，无法直接修改自定义Container的前景样式。要实现选中/未选中标签的样式差异，需要通过TabController监听选中状态，动态调整每个标签的Container样式。

以下是完整的可运行实现代码：

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

  @override
  State<CustomTabBar> createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  // 统一管理选中/未选中样式参数
  final Color _selectedBg = const Color(0xfffacdc9);
  final Color _unselectedBg = const Color(0xFFF4F1F1);
  final Color _selectedBorder = const Color(0xFFFAC5C5);
  final Color _unselectedBorder = const Color(0xfffccccc);

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    // 监听选中状态变化，触发UI更新
    _tabController.addListener(() {
      if (_tabController.indexIsChanging) setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return TabBar(
      padding: EdgeInsets.zero,
      labelPadding: EdgeInsets.zero,
      indicatorPadding: EdgeInsets.zero,
      // 隐藏默认指示器，避免和自定义样式冲突
      indicator: const BoxDecoration(),
      controller: _tabController,
      tabs: List.generate(3, (index) {
        final isSelected = _tabController.index == index;
        final tabTexts = ['1st', '2nd', '3rd'];
        
        return Container(
          height: 50,
          width: 120,
          decoration: BoxDecoration(
            color: isSelected ? _selectedBg : _unselectedBg,
            border: Border.all(
              color: isSelected ? _selectedBorder : _unselectedBorder,
              width: 2,
            ),
            borderRadius: const BorderRadius.all(Radius.circular(25)),
          ),
          child: OutlinedButton(
            onPressed: () => _tabController.animateTo(index),
            // 清除按钮默认样式，避免覆盖外层Container效果
            style: OutlinedButton.styleFrom(
              side: BorderSide.none,
              backgroundColor: Colors.transparent,
            ),
            child: Text(
              tabTexts[index],
              style: TextStyle(
                color: isSelected ? Colors.black : Colors.grey[600],
              ),
            ),
          ),
        );
      }),
    );
  }
}

关键实现点 #

• 用TabController管理选中状态，通过SingleTickerProviderStateMixin提供动画支持，确保切换时的平滑过渡。
• 监听TabController的状态变化，调用setState()触发UI重绘，让每个标签的样式根据选中状态动态切换。
• 隐藏TabBar默认的indicator，避免其与自定义Container的样式冲突。
• 移除OutlinedButton的默认边框和背景色，防止按钮样式覆盖外层Container的自定义效果。
• 点击按钮时通过_tabController.animateTo(index)同步选中状态，保证交互一致性。

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