Flutter - 在选项卡之间移动导致丢失状态

Posted 2023-02-23

【中文标题】Flutter - 在选项卡之间移动导致丢失状态

【英文标题】：Flutter - moving between tabs cause to lose the state

【发布时间】：2021-01-18 18:28:30

【问题描述】：

我遇到了一个奇怪的情况。我有以下代码显示选项卡及其内容：

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 组件（存储表格内容）的状态，这意味着当我在标签之间移动时，显示的表格是空的。

【问题讨论】：

看来你需要AutomaticKeepAliveClientMixin

【参考方案1】：

您可以查看此处给出的答案 https://***.com/a/51225319/13927133

如果您想在 TabBarView 中保留屏幕状态，可以在 State 类中使用名为 AutomaticKeepAliveClientMixin 的 mixin 类。

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

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