颤振-在选项卡之间移动会导致失去状态

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类中使用名为AutomaticKeepAliveClientMixin的mixin类。

然后重写wantKeepAlive方法并返回true。

@diegoveloper也为此发表了一篇媒体文章https://medium.com/@diegoveloper/flutter-persistent-tab-bars-a26220d322bc