如何修复“控制器的长度属性与 TabBar 的选项卡属性中存在的选项卡数量不匹配。”答案

【问题标题】：How to fix 'Controller's length property does not match the number of tabs present in TabBar's tabs property.'如何修复“控制器的长度属性与 TabBar 的选项卡属性中存在的选项卡数量不匹配。”
【发布时间】：2019-10-24 00:28:45
【问题描述】：

我正在生成一个由 AppBar + TabBar + TabBarView 组成的NestedScrollView，其中包含动态数量的选项卡，具体取决于我存储在应用程序状态中的值。

当要生成的选项卡数量大于 1 时，会抛出错误并显示以下消息： Controller's length property (<actual tab length>) does not match the number of tabs (1) present in TabBar's tabs property.

由于某种原因，TabBar 的 tabs 长度似乎始终为 1，尽管在代码中的任何地方都使用相同的变量来确定长度。

我在这里错过了什么？

import 'package:flutter/material.dart';
import 'package:test_app/models/app_state_container.dart';
import 'package:test_app/utils/seeder.dart';
import 'dart:math';
import 'package:test_app/views/tabs/home/team_row.dart';

class MyLeaderboard extends StatefulWidget {
  @override
  _MyLeaderboardState createState() => _MyLeaderboardState();
}

class _MyLeaderboardState extends State<MyLeaderboard> {
  final _tabName = "Leaderboard";

  @override
  Widget build(BuildContext context) {
    var container = AppStateContainer.of(context);
    var appState = container.state;

    return DefaultTabController(
      length: appState.leaderboard.groups.length,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text(_tabName, style: TextStyle(fontSize: 30)),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.refresh),
                  onPressed: () => setState(() {
                    appState.leaderboard = Seeder.generateLeaderboard();
                  }),
                ),
              ],
              pinned: true,
              floating: true,
              snap: true,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(
                tabs: appState.leaderboard.groups.map((g) => Text(g.name)).toList(),
              ),
            )
          ];
        },
        body: TabBarView(
          children: <Widget>[
            CustomScrollView(
              physics: BouncingScrollPhysics(),
              slivers: appState.leaderboard.groups
                  .map((g) => SliverList(
                          delegate: SliverChildBuilderDelegate(
                        (context, index) {
                          final int itemIndex = index ~/ 2;
                          if (index.isEven) {
                            return TeamRow(g.teams[itemIndex]);
                          }
                          return Divider(
                            height: 1,
                          );
                        },
                        childCount: max(0, g.teams.length * 2 - 1),
                      )))
                  .toList(),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

事实证明我没有正确构建TabBarView 的主体，（我在CustomScrollView 中执行多个SliverLists 而不是多个CustomScrollViews。

这是我的问题中发布的代码的工作 build 方法：

  Widget build(BuildContext context) {
    var container = AppStateContainer.of(context);
    var appState = container.state;

    return DefaultTabController(
      length: appState.leaderboard.groups.length,
      child: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: Text(_tabName, style: TextStyle(fontSize: 30)),
              actions: <Widget>[
                IconButton(
                  icon: Icon(Icons.refresh),
                  onPressed: () => setState(() {
                    appState.leaderboard = Seeder.generateLeaderboard();
                  }),
                ),
              ],
              pinned: true,
              floating: true,
              snap: true,
              forceElevated: innerBoxIsScrolled,
              bottom: TabBar(
                tabs: appState.leaderboard.groups
                    .map((g) => Text(g.name))
                    .toList(),
              ),
            )
          ];
        },
        body: TabBarView(
          children: appState.leaderboard.groups
              .map((g) => CustomScrollView(
                      physics: BouncingScrollPhysics(),
                      slivers: <Widget>[
                        SliverList(
                            delegate: SliverChildBuilderDelegate(
                          (context, index) {
                            final int itemIndex = index ~/ 2;
                            if (index.isEven) {
                              return TeamRow(g.teams[itemIndex]);
                            }
                            return Divider(
                              height: 1,
                            );
                          },
                          childCount: max(0, g.teams.length * 2 - 1),
                        ))
                      ]))
              .toList(),
        ),
      ),
    );
  }

【讨论】：

【解决方案2】：

我第一次遇到这个错误，代码是这样的：

child: TabBarView(children: [],controller: _tabController,)

然后修改完成，内容如下：
我有三个标签

child: TabBarView(children: [
      Container( ),
      Container( ),
      Container( ),
    ],controller: _tabController,)

然后代码系统地工作

【讨论】：