flutter - Flutter - 将选项卡添加到页面时发生错误

Question

所以我有以下代码应该显示带有按钮的页面以在页面中添加选项卡：

List<String> tabTitles = [];
List<Widget> tabContents = [];
TabController _tabController;

Scaffold(
      appBar: AppBar(
        title: Text('DataTable of Gene Lists'),
        centerTitle: true,
        backgroundColor: Colors.greenAccent,
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => _onTabAdd(_tabController.index),
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () => _onTabRemoved(_tabController.index),
          ),
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () => _onTabEdit(context),
          ),
        ],
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(40.0),
          child: Expanded(
            child: Container(
              color: Colors.blue,
              child: TabBar(
                controller: _tabController,
                tabs: tabTitles
                    .map(
                      (title) => Tab(text: title),
                    )
                    .toList(),
                labelColor: Colors.yellow,
                unselectedLabelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorPadding: EdgeInsets.all(5.0),
                indicatorColor: Colors.red,
              ),
            ),
          ),
        ),
      ),

以及处理选项卡添加的功能：

void _onTabAdd(int index) {
    setState(() {
      tabTitles.add("Tab ${tabTitles.length}");
      tabContents.add(GenesTable(this));
      _tabController = TabController(length: tabTitles.length, vsync: this);
    });
  }

当我单击此按钮时，内容似乎加载成功，但问题是没有显示标题，并且显示以下错误，如图所示：

任何帮助将不胜感激！

编辑：

我在 Flutter 的 repo 上提交了一个 issue，你可以在这里关注它

标签： flutterdartweb-applicationsflutter-layout

Answer 1

我无法解决您的问题，但我找到了解决方法。

也许这对您有用，或者这可能会帮助您真正找到问题。

这里是：

  void _onTabAdd(int index) {
    tabTitles.add("Tab ${tabTitles.length}");
    tabContents.add(Container(
      color: Colors.red,
      height: 200,
      width: 200,
    ));
    _tabController = TabController(length: tabTitles.length, vsync: this);
    setState(() {});
    Future.delayed(Duration(milliseconds: 1), () {
      setState(() {});
    });
  }

注意：红色警告不会出现在生产中，因此它实际上可能是一个可行的解决方案。