flutter - flutter -在制表符之间移动会导致丢失状态

Question

我的情况很奇怪。我有以下代码显示选项卡及其内容:

Scaffold(
      appBar: AppBar(
        title: Text('Title'),
        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: 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,
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: tabContents.map((e) => e).toList(),
      ),

您可以看到我可以选择使用按钮添加或删除选项卡，并且使用以下功能似乎可以正常工作:

void _onTabRemoved(int index) {
    setState(() {
      tabTitles.removeAt(index);
      tabContents.removeAt(index);
      _tabController = TabController(length: tabTitles.length, vsync: this);
    });
  }

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

问题是，当我在选项卡之间移动时，我失去了 GenesTable组件的状态(存储表内容的状态)，这意味着当我在选项卡之间移动时，所显示的表为空。

Answer 1

您可以通过此处给出的答案
https://stackoverflow.com/a/51225319/13927133
如果您想将屏幕状态保留在TabBarView中，则可以在State类中使用称为mixin的AutomaticKeepAliveClientMixin类。
然后重写wantKeepAlive方法并返回true。
@diegoveloper也为此发表了一篇中篇文章
https://medium.com/@diegoveloper/flutter-persistent-tab-bars-a26220d322bc