Flutter中如何在TabController中获取并使用int类型的index值？

问题原因 #

你代码中的index仅在ListView.builder的itemBuilder作用域内有效，TabBar处于独立的上层作用域，无法直接访问该变量。同时你当前把DefaultTabController的长度硬编码为1、仅生成1个Tab，也不符合根据返回的分类动态生成Tab的需求。

解决方法 #

你可以通过遍历分类列表动态生成Tab，遍历过程中就能直接拿到对应分类的索引值，如需Tab切换对应分类内容，搭配TabBarView即可实现。修改后完整代码如下：

@override
Widget build(BuildContext context) {
  return FutureBuilder<Categories>(
    future: _futureCategories,
    builder: (BuildContext context, AsyncSnapshot<Categories> snapshot) {
      if (snapshot.hasData) {
        // 提前判空处理避免空异常
        final categories = snapshot.data?.data ?? [];
        return DefaultTabController(
          // Tab长度和返回的分类数量保持一致
          length: categories.length,
          child: Scaffold(
            appBar: AppBar(
              title: const Text('List User Example'),
              bottom: TabBar(
                indicatorColor: Colors.lime,
                // 遍历分类列表动态生成Tab，可直接获取对应索引index
                tabs: categories.asMap().entries.map((entry) {
                  int index = entry.key;
                  var category = entry.value;
                  // 此处可自由使用index变量
                  return Text(category.name.toUpperCase());
                }).toList(),
                isScrollable: true,
                labelColor: Colors.black,
              ),
            ),
            // 搭配TabBarView实现切换Tab对应展示对应分类内容
            body: TabBarView(
              children: categories.asMap().entries.map((entry) {
                int index = entry.key;
                var currentCategory = entry.value;
                return ListView.builder(
                  itemCount: 20, // 可替换为当前分类下的实际内容数量
                  itemBuilder: (BuildContext context, int itemIndex) {
                    return Text('${currentCategory.name}分类下的第$itemIndex项');
                  },
                );
              }).toList(),
            ),
          ),
        );
      } else if (snapshot.hasError) {
        return NewsError(
          // 原写法仅会输出布尔值，替换后可展示具体错误信息
          errorMessage: '${snapshot.error}',
        );
      }
      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  );
}

补充说明 #

• 如果你不需要Tab切换对应内容，仅需在Tab文本中使用索引，在生成tabs列表的遍历回调中直接使用index即可
• 如需获取当前选中的Tab索引，可以给DefaultTabController添加监听，或者直接创建TabController实例绑定后读取index属性

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