Question

我正在生成一个NestedScrollView，它由一个AppBar + TabBar + TabBarView组成，该标签具有动态数量的标签，具体取决于我在应用程序状态下存储的值。

要生成的选项卡数大于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(),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

事实证明，我没有正确构建TabBarView的主体，（我在SliverList内执行了多个CustomScrollView，而不是多个CustomScrollView。 / p>

这是我的问题中张贴的代码的有效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(),
        ),
      ),
    );
  }

Answer 2

第一次出现这个错误，代码是这样的：

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

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

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

然后代码系统地工作

如何解决“控制器的length属性与TabBar的tabs属性中存在的选项卡数量不匹配。”

2 个答案: