Flutter如何在ListView.builder中使用AppBar获取index配置TabBarController

现有代码异常原因 #

• AppBar是Scaffold用于顶部导航栏的专属组件，默认依赖Scaffold的布局约束计算尺寸，直接作为ListView的子项使用时，布局系统无法正常计算宽高，同时缺少TabBar对应的TabBarView组件，会触发布局异常导致白屏。
• DefaultTabController全局仅配置了1个，但是ListView.builder会生成多个带TabBar的AppBar实例，Tab控制器和Tab组件无法对应，也会导致运行错误。

可行实现方案 #

根据需求场景选择对应实现方式：

方案1：每个列表项独立携带Tab切换区域

如果需求是列表的每个子项都有自己的Tab栏和对应切换内容，不需要共用顶部全局AppBar，直接在列表项中使用TabBar+TabBarView组合，单独管理每个项的Tab控制器即可：

@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 Scaffold(
          // 全局通用AppBar如果需要可以放在这，不需要就删除
          appBar: AppBar(title: const Text('分类列表')),
          body: ListView.builder(
            itemCount: categories.length,
            itemBuilder: (BuildContext context, int index) {
              // 每个列表项单独创建DefaultTabController，绑定当前index对应的配置
              return DefaultTabController(
                length: 2, // 此处也可根据index动态调整Tab数量
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // 无需使用AppBar，直接用TabBar作为列表项的头部
                    TabBar(
                      tabs: [
                        Text('${categories[index].name}'.toUpperCase()),
                        Text('${categories[index].name}2'.toUpperCase()),
                      ],
                      isScrollable: true,
                      labelColor: Colors.black,
                    ),
                    // 必须搭配TabBarView使用，对应每个Tab的内容
                    SizedBox(
                      height: 200, // 给TabBarView设置固定高度，也可在外层嵌套Expanded适配
                      child: TabBarView(
                        children: [
                          // 第一个Tab的内容，可直接使用index做对应配置
                          Center(child: Text('${categories[index].name}的内容1')),
                          // 第二个Tab的内容
                          Center(child: Text('${categories[index].name}的内容2')),
                        ],
                      ),
                    )
                  ],
                ),
              );
            },
          ),
        );
      } else if (snapshot.hasError) {
        return NewsError(
          errorMessage: '${snapshot.error}',
        );
      }
      // 补充loading状态，避免无返回值异常
      return const Center(child: CircularProgressIndicator());
    },
  );
}

方案2：全局共用一个顶部AppBar，Tab配置跟随列表滚动的index变化

如果需求是顶部只有一个AppBar，Tab内容随列表当前滚动到的item的index动态修改，给ListView加滚动监听获取当前可见的item index，更新AppBar的配置即可：

// 先在State类中定义变量
int _currentActiveIndex = 0;
final ScrollController _scrollController = ScrollController();

@override
void initState() {
  super.initState();
  // 滚动监听，计算当前可见的第一个item的index
  _scrollController.addListener(() {
    // 假设每个列表项高度固定为200计算index，也可引入第三方库获取精确可见位置
    int currentIndex = (_scrollController.offset / 200).floor();
    if(currentIndex != _currentActiveIndex) {
      setState(() {
        _currentActiveIndex = currentIndex;
      });
    }
  });
}

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

@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(
          length: 2,
          child: Scaffold(
            // AppBar放在Scaffold的appBar属性，用_currentActiveIndex配置Tab
            appBar: AppBar(
              title: const Text('Hello'),
              bottom: TabBar(
                tabs: [
                  Text('${categories[_currentActiveIndex].name}'.toUpperCase()),
                  Text('${categories[_currentActiveIndex].name}'.toUpperCase()),
                ],
                isScrollable: true,
                labelColor: Colors.black,
              ),
            ),
            body: ListView.builder(
              controller: _scrollController,
              itemCount: categories.length,
              itemBuilder: (BuildContext context, int index) {
                // 列表项自定义内容
                return ListTile(
                  title: Text(categories[index].name),
                );
              },
            ),
          ),
        );
      } else if (snapshot.hasError) {
        return NewsError(
          errorMessage: '${snapshot.error}',
        );
      }
      return const Center(child: CircularProgressIndicator());
    },
  );
}

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