Flutter中如何获取当前Tab的索引？

嘿，针对你提到的官方TabBarDemo示例，要获取当前选中的Tab索引其实有两种常用的方式，我给你详细拆解下：

方法一：利用DefaultTabController直接获取/监听索引 #

官方示例里用的是DefaultTabController，它内部维护了Tab的状态，我们可以通过DefaultTabController.of(context)来拿到它的实例，进而获取当前索引，或者监听索引变化。

直接获取当前索引 #

如果只是想在某个时刻获取当前选中的Tab索引，可以在Widget的build方法里这样做：

import 'package:flutter/material.dart';

void main() { runApp(const TabBarDemo()); }

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: Builder(
            builder: (context) {
              // 获取当前Tab索引
              int currentIndex = DefaultTabController.of(context)!.index;
              return TabBarView(
                children: [
                  Center(child: Text('当前Tab索引：$currentIndex')),
                  Center(child: Text('当前Tab索引：$currentIndex')),
                  Center(child: Text('当前Tab索引：$currentIndex')),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

这里用Builder是为了确保context能访问到DefaultTabController的实例，避免context层级不对的问题。

监听索引变化 #

如果需要实时监听Tab切换的索引变化，可以用AnimatedBuilder配合DefaultTabController的animation：

body: AnimatedBuilder(
  animation: DefaultTabController.of(context)!.animation!,
  builder: (context, child) {
    int currentIndex = DefaultTabController.of(context)!.index;
    return TabBarView(
      children: [
        Center(child: Text('当前选中的是第${currentIndex+1}个Tab')),
        Center(child: Text('当前选中的是第${currentIndex+1}个Tab')),
        Center(child: Text('当前选中的是第${currentIndex+1}个Tab')),
      ],
    );
  },
),

这样每次Tab切换时，UI都会自动更新显示当前索引。

方法二：自定义TabController（更灵活） #

如果你的页面逻辑比较复杂，需要更灵活地控制Tab状态，建议自己创建TabController，这样可以直接监听它的index变化，还能手动切换Tab。

示例代码如下：

import 'package:flutter/material.dart';

void main() { runApp(const TabBarDemo()); }

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

  @override
  State<TabBarDemo> createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // 创建TabController，length对应Tab的数量
    _tabController = TabController(length: 3, vsync: this);
    // 监听索引变化
    _tabController.addListener(() {
      if (!_tabController.indexIsChanging) {
        setState(() {
          _currentIndex = _tabController.index;
        });
        // 这里可以做一些Tab切换后的逻辑处理，比如请求数据等
        print('当前Tab索引：$_currentIndex');
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _tabController, // 绑定自定义的TabController
            tabs: const [
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.directions_transit)),
              Tab(icon: Icon(Icons.directions_bike)),
            ],
          ),
          title: Text('Tabs Demo - 当前索引：$_currentIndex'),
        ),
        body: TabBarView(
          controller: _tabController, // 绑定自定义的TabController
          children: [
            const Center(child: Text('汽车Tab')),
            const Center(child: Text('公交Tab')),
            const Center(child: Text('自行车Tab')),
          ],
        ),
      ),
    );
  }
}

这种方式的优势在于，你可以在addListener里做任何Tab切换后的逻辑，比如网络请求、状态更新等，而且能完全控制Tab的切换行为。

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