时间戳

首页 > 解决方案 > Flutter - 在选项卡之间移动导致丢失状态

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

问题描述

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

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

标签： flutterdartweb-applications

解决方案

你可以通过这里给出的答案 https://stackoverflow.com/a/51225319/13927133

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

然后覆盖该wantKeepAlive方法并返回true。

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

推荐阅读