Flutter TabBar如何实现点击或滑动切换时都能获取tab索引值

实现方案 #

要实现点击、滑动切换Tab时都能拿到索引，需要监听TabController的状态变化。TabBar自带的onTap仅响应点击操作，滑动切换由TabController驱动，不会触发该回调。

具体实现步骤：

1. 首先在页面的State中混入SingleTickerProviderStateMixin，创建并初始化TabController，添加切换监听
2. 将TabBar和TabBarView都绑定同一个TabController实现联动

完整代码示例：

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

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  // 与你的Tab数量保持一致
  final int _tabCount = 3;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _tabCount, vsync: this);
    // 监听Tab切换，点击和滑动都会触发该回调
    _tabController.addListener(() {
      // 过滤滑动过程中的中间索引，仅在切换完成后触发业务逻辑，不需要可以去掉该判断
      if (!_tabController.indexIsChanging) {
        context.read<ScheduledPossibleDayCubit>().tabClicked(index: _tabController.index);
      }
    });
  }

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TabBar(
          controller: _tabController,
          tabs: const [
            Tab(text: 'Tab1'),
            Tab(text: 'Tab2'),
            Tab(text: 'Tab3'),
          ],
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: const [
              // 对应Tab的页面内容
              Center(child: Text('页面1')),
              Center(child: Text('页面2')),
              Center(child: Text('页面3')),
            ],
          ),
        )
      ],
    );
  }
}

补充说明：

• 如果你使用的是DefaultTabController做管理，不需要手动创建TabController，可通过DefaultTabController.of(context)获取全局控制器后添加上述监听逻辑即可。
• 若需要获取滑动过程中的实时索引，去掉!_tabController.indexIsChanging的判断即可。

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