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

Answer 1

您可以查看此处给出的答案

如果您想将屏幕状态保持在您的 TabBarView，您可以在您的状态 [=24] 中使用名为 AutomaticKeepAliveClientMixin 的 mixin class =].

然后覆盖 wantKeepAlive 方法和 return true。

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

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

Flutter - moving between tabs cause to lose the state

web-applications

dart