Flutter TabBarView出现Controller length属性与Tab数量不匹配报错

错误原因 #

• TabBarView子项生成逻辑错误：你在TabBarView的children中使用了双重for循环，会将每个Books下的每个Pages都单独生成一个GridView作为独立标签页，导致标签页总数和你设置的控制器长度5不匹配。正确逻辑是1个Books对应1个标签页，标签页内的GridView负责展示当前Books下的所有Pages，不需要内层for循环。
• 数据源长度不匹配：你的_books数组仅配置了4个Books实例，和TabController设置的length=5不一致，缺少第五个标签页对应的数据。
• GridView数据绑定错误：原代码中GridView使用k作为索引取值，无法对应到当前标签页的Books数据。

修复后完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample',
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _Home();
}

class _Home extends State<Home> with TickerProviderStateMixin {
  late TabController _tabController;

  // 补全第五个Books实例，和控制器长度5匹配
  final List<Books> _books = [
    Books(1, [
      Pages(1, '___a'),
      Pages(2, '___a'),
      Pages(3, '___a'),
      Pages(4, '___a'),
    ]),
    Books(2, [Pages(1, '___b'),]),
    Books(3, [Pages(1, '___c'),]),
    Books(4, [Pages(1, '___d'),]),
    Books(5, [Pages(1, '___e'),]),
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 添加Expanded约束TabBarView高度，避免布局溢出
          Expanded(
            child: TabBarView(controller: _tabController, children: [
              // 仅遍历_books，每个Books对应一个标签页的GridView
              for (int i = 0; i < _books.length; i++)
                GridView.builder(
                    padding: EdgeInsets.zero,
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisSpacing: 1,
                      mainAxisSpacing: 1,
                      crossAxisCount: 1,
                    ),
                    // 取当前标签页对应Books的pages长度
                    itemCount: _books[i].pages.length,
                    itemBuilder: (BuildContext context, index) {
                      final pageId = _books[i].pages[index].pageId;
                      final pageTitle = _books[i].pages[index].pageTitle;
                      return Container(
                        margin: const EdgeInsets.all(4.0),
                        decoration: BoxDecoration(
                          color: Colors.black,
                        ),
                        alignment: Alignment.center,
                        // 添加白色文字样式，适配黑色背景
                        child: Text('($pageId) - ($pageTitle)', style: const TextStyle(color: Colors.white),),
                      );
                    }),
            ]),
          ),
        ],
      ),
    );
  }
}

class Books {
  final int bookId;
  final List<Pages> pages;

  Books(this.bookId, this.pages);
}

class Pages {
  final int pageId;
  final String pageTitle;

  Pages(this.pageId, this.pageTitle);
}

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