Flutter中如何监听TabBar的索引变化？

方案一：TabController.addListener（官方推荐，解决可靠性问题） #

TabController.addListener是官方提供的标准监听方式，只要正确过滤中间状态，就能可靠捕捉Tab切换完成的事件。

修改你的代码，在initState中添加监听逻辑：

@override
void initState() {
  super.initState();
  _tabController = TabController(
    initialIndex: 0,
    length: 2,
    vsync: this,
  );

  // 添加Tab切换监听
  _tabController.addListener(() {
    // 仅在切换完成后触发回调（避免滑动过程中多次更新UI）
    if (!_tabController.indexIsChanging) {
      setState(() {}); // 触发UI重建，更新AppBar按钮显示状态
    }
  });
}

// 记得在组件销毁时释放控制器，避免内存泄漏
@override
void dispose() {
  _tabController.dispose();
  super.dispose();
}

添加这段代码后，当Tab切换完成时，setState会触发UI重建，AppBar中的if (_tabController.index == 0)判断会重新执行，自动显示/隐藏保存按钮。

为什么要判断indexIsChanging？ #

Tab滑动过程中，index会临时变化，indexIsChanging为true表示切换仍在进行中；当切换完成后，indexIsChanging变为false，此时的index才是最终选中的Tab索引。这个判断能避免滑动过程中不必要的UI更新和错误状态触发。

方案二：使用StreamController实现流式监听 #

如果需要在多个组件中共享Tab索引状态，可以用StreamController分发索引变化事件，通过StreamBuilder响应UI更新：

class _EditPostPageState extends State<EditPostPage>
    with TickerProviderStateMixin {
  late TabController _tabController;
  final StreamController<int> _tabIndexStream = StreamController<int>.broadcast();

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      initialIndex: 0,
      length: 2,
      vsync: this,
    );

    _tabController.addListener(() {
      if (!_tabController.indexIsChanging) {
        _tabIndexStream.add(_tabController.index);
      }
    });
    // 初始发送一次默认索引
    _tabIndexStream.add(0);
  }

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

  @override
  Widget build(BuildContext context) {
    final _tabBar = TabBar(
      controller: _tabController,
      indicatorColor: AppColors.Primary,
      tabs: const [
        Tab(text: 'tab 1'),
        Tab(text: 'tab 2'),
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: StreamBuilder<int>(
          stream: _tabIndexStream.stream,
          builder: (context, snapshot) {
            final currentIndex = snapshot.data ?? 0;
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                const Text('Edit Post'),
                if (currentIndex == 0)
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.2,
                    child: RoundedButton(
                      text: t.save_btn,
                      color: AppColors.Secondary,
                      onPressed: () {
                        // TODO 保存逻辑
                      },
                    ),
                  )
              ],
            );
          },
        ),
        bottom: PreferredSize(
          preferredSize: _tabBar.preferredSize,
          child: ColoredBox(
            color: Colors.black,
            child: _tabBar,
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Text('tab 1 content'),
          Text('tab 2 content'),
        ],
      ),
    );
  }
}

这种方式适合需要跨组件监听Tab状态的场景，通过Stream实现状态分发，解耦UI与状态逻辑。

方案三：使用DefaultTabController（简化代码） #

如果不需要自定义TabController的复杂逻辑，可以改用DefaultTabController，它会自动管理Tab状态，无需手动创建控制器：

class EditPostPage extends StatelessWidget {
  const EditPostPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Scaffold(
        appBar: AppBar(
          title: Builder(
            builder: (context) {
              final tabController = DefaultTabController.of(context)!;
              return Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  const Text('Edit Post'),
                  if (tabController.index == 0)
                    SizedBox(
                      width: MediaQuery.of(context).size.width * 0.2,
                      child: RoundedButton(
                        text: t.save_btn,
                        color: AppColors.Secondary,
                        onPressed: () {
                          // TODO 保存逻辑
                        },
                      ),
                    )
                ],
              );
            },
          ),
          bottom: PreferredSize(
            preferredSize: const TabBar(tabs: [Tab(text: 'tab1'), Tab(text: 'tab2')]).preferredSize,
            child: ColoredBox(
              color: Colors.black,
              child: TabBar(
                indicatorColor: AppColors.Primary,
                tabs: const [
                  Tab(text: 'tab 1'),
                  Tab(text: 'tab 2'),
                ],
              ),
            ),
          ),
        ),
        body: TabBarView(
          children: const [
            Text('tab 1 content'),
            Text('tab 2 content'),
          ],
        ),
      ),
    );
  }
}

这种方式代码更简洁，但灵活性稍弱，适合简单的Tab切换场景。

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