如何在Flutter TabBar的当前激活标签中添加自定义widget

核心是通过监听TabController的当前激活下标，和每个标签的下标做比对，控制对应自定义Widget的显隐即可，不需要修改原有TabBar/TabView的基础逻辑。

1. 绑定TabController并监听切换事件 #

首先确保页面是Stateful组件，混入SingleTickerProviderStateMixin，初始化TabController并添加切换监听，触发UI刷新：

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

  @override
  State<CustomTabPage> createState() => _CustomTabPageState();
}

class _CustomTabPageState extends State<CustomTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  // 自定义标签标题列表，可根据你的业务调整
  final List<String> _tabLabels = ["首页", "分类", "我的"];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabLabels.length, vsync: this);
    // 监听标签切换，触发setState刷新Tab显隐状态
    _tabController.addListener(() {
      setState(() {});
    });
  }

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

2. 封装自定义Tab项，控制自定义Widget显隐 #

自己封装Tab项组件，接收「是否激活」参数，控制自定义Widget的显隐。如果需要保留自定义Widget的实例状态（切换不销毁），用Visibility组件配置保留状态参数即可：

Widget _buildTabItem({required String label, required bool isActive}) {
    return Tab(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(label),
          // 仅激活态显示自定义Widget，示例为小红点，替换为你的自定义组件即可
          Visibility(
            visible: isActive,
            // 以下三个参数配置为true时，会保留Widget实例，切换时不会重新构建
            maintainState: true,
            maintainAnimation: true,
            maintainSize: false, // 不需要占位时设为false，避免非激活标签留空白
            child: Container(
              margin: const EdgeInsets.only(top: 3),
              width: 6,
              height: 6,
              decoration: const BoxDecoration(color: Colors.red, shape: BoxShape.circle),
            ),
          )
        ],
      ),
    );
  }

3. 构造TabBar和TabView #

在build方法中遍历标签列表，比对当前激活下标，生成对应Tab项：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("自定义标签显隐示例"),
        bottom: TabBar(
          controller: _tabController,
          tabs: _tabLabels.asMap().entries.map((entry) {
            final index = entry.key;
            final label = entry.value;
            return _buildTabItem(
              label: label,
              isActive: _tabController.index == index,
            );
          }).toList(),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Center(child: Text("首页内容")),
          Center(child: Text("分类内容")),
          Center(child: Text("我的内容")),
        ],
      ),
    );
  }
}

• 如果你不需要保留自定义Widget的状态，直接用if (isActive)判断渲染即可，不需要用Visibility，性能更优。
• 如果自定义Widget是放在TabView的页面内而非TabBar的标签上，逻辑完全一致：在每个TabView页面内判断当前激活下标是否为页面对应的下标，控制显隐即可。

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