Flutter中使用Chip组件封装TabBar实现标签切换及选中样式

• 你直接把预定义的const Chip常量列表传入TabBar，完全没有绑定TabController的选中索引，每个Chip无法感知自身当前是选中还是未选中状态，自然做不了样式差异化。
• Chip组件自带默认背景、材质样式，会直接盖住TabBar自带的indicator装饰层，你写在indicator里的选中样式根本透不出来。
• 你定义的list是编译时常量Widget列表，不支持根据选中索引动态更新子项样式，这是你用数组定义标签时遇到阻塞的核心原因。
• 代码里写的bool _selectedTab = false是完全无效的，单个布尔值根本没法记录多个Tab的选中状态。

直接放弃依赖TabBar默认指示器，监听TabController的索引变化，动态生成对应状态的Tab子项即可，改完的可直接运行的代码如下：

class YearTab extends StatefulWidget {
  const YearTab({
    Key? key,
  }) : super(key: key);

  @override
  State<YearTab> createState() => _YearTabState();
}

class _YearTabState extends State<YearTab>
    with SingleTickerProviderStateMixin {
  late TabController _controller;
  // 只存标签文本，不要提前写死Widget
  final List<String> tabLabels = const [
    'This year',
    '2021',
    '2020',
    '2019',
    '2018'
  ];

  @override
  void initState() {
    super.initState();
    _controller = TabController(length: tabLabels.length, vsync: this);
    // 监听tab切换，切换完成后刷新页面更新选中样式
    _controller.addListener(() {
      if (_controller.indexIsChanging) return;
      setState(() {});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
            color: AppColor.white,
            width: MediaQuery.of(context).size.width,
            child: TabBar(
                physics: const BouncingScrollPhysics(),
                // 把自带指示器设为透明，所有选中样式交给Chip控制
                indicator: const BoxDecoration(color: Colors.transparent),
                labelPadding: const EdgeInsets.symmetric(horizontal: 4),
                controller: _controller,
                isScrollable: true,
                // 动态生成tabs，不用预定义的const Widget列表
                tabs: List.generate(tabLabels.length, (index) {
                  final bool isSelected = _controller.index == index;
                  return Tab(
                    child: Chip(
                      // 在这里自由配置选中/未选中的样式
                      backgroundColor: isSelected 
                          ? const Color.fromARGB(255, 176, 208, 255)
                          : Colors.grey.shade100,
                      side: BorderSide(
                        color: isSelected ? Colors.red : Colors.transparent,
                        width: 1
                      ),
                      label: Text(
                        tabLabels[index],
                        style: TextStyle(
                          color: isSelected ? Colors.red : Colors.black87,
                        ),
                      ),
                    ),
                  );
                }),
            )
        ),
        SizedBox(
          height: MediaQuery.of(context).size.height * 2.2,
          child: TabBarView(
            controller: _controller,
            children: const [
              Content1(),
              Content2(),
              Content3(),
              Content4(),
              Content5(),
            ],
          ),
        )
      ],
    );
  }
}

• 移除了原来写死的List<Widget>常量列表，改为只存标签文本的字符串列表，通过List.generate动态生成每一个Tab子项，解决数组定义标签的阻塞问题。
• 给TabController添加状态监听，每次Tab切换完成后触发页面 rebuild，每个子项可以实时拿到当前选中索引，判断自身选中状态。
• 把TabBar自带的indicator设为全透明，选中/未选中的背景、边框、文字颜色全部配置在Chip的对应属性里，不会出现样式被遮挡的问题，你可以根据设计稿自由调整两种状态的样式参数。
• 补充了dispose方法释放TabController资源，避免内存泄漏。
• 给Tab加了统一水平内边距，避免标签之间过度拥挤。

如果你用的是Flutter 3.0以上版本，文字颜色也可以直接用TabBar自带的labelColor、unselectedLabelColor配置，但背景、边框样式还是要通过判断选中状态动态设置，因为Chip本身的样式优先级高于TabBar的默认装饰。

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