保留选项卡视图页面之间的状态答案

【问题标题】：Preserving state between tab view pages保留选项卡视图页面之间的状态
【发布时间】：2018-08-11 18:21:33
【问题描述】：

问题

我有两个ListViews 使用TabController 在TabBarView 内渲染。

如何在每个 ListView 之间保留状态（因为没有更好的词），以便：1.) 小部件不会重建和 2.) 在选项卡之间记住 ListView 位置。

相关代码

class AppState extends State<App> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,
      length: _allPages.length,
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Widget _buildScaffold(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('headlines'),
        bottom: new TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: _allPages
                .map((_Page page) => new Tab(text: page.country))
                .toList()),
      ),
      body: new TabBarView(
          controller: _tabController,
          children: _allPages.map((_Page page) {
            return new SafeArea(
              top: false,
              bottom: false,
              child: new Container(
                key: new ObjectKey(page.country),
                child: new Newsfeed(country: page.country),
              ),
            );
          }).toList()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'news app',
      home: _buildScaffold(context),
    );
  }
}

说明 gif

https://media.giphy.com/media/2ysWhzqHVqL1xcBlBE/giphy.gif

【问题讨论】：

标签： flutter listview dart flutter-layout tabview

【解决方案1】：

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

之后，您必须重写 wantKeepAlive 方法并返回 true。

我在这里写了一篇关于这个的帖子：https://medium.com/@diegoveloper/flutter-persistent-tab-bars-a26220d322bc

【讨论】：

绝对是最好的方法
这应该是建议的答案！
我有一个关于此youtube.com/watch?v=3v4ZofYsn5I 的西班牙语视频，但您可以启用英文字幕。

【解决方案2】：

长话短说，为您的 ListView 或其祖先之一使用 PageStorageKey()，在您的情况下为 Container 小部件：

child: new Container(
    key: new PageStorageKey(page.country),
    child: new Newsfeed(country: page.country),
),

在此处查看详细信息：

【讨论】：

这会只存储 1 个属性吗？
请看下面@diegoveloper 提供的更好的解决方案

【解决方案3】：

在我们的州使用mixin 和AutomaticKeepAliveClientMixin。

并实施：bool get wantKeepAlive => true;

class ResidentListScreen extends StatefulWidget {
  @override
  _ResidentListScreenState createState() => _ResidentListScreenState();
}

class _ResidentListScreenState extends State<ResidentListScreen> with 
AutomaticKeepAliveClientMixin<ResidentListScreen>{

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
   super.initState();
  }

 @override
 Widget build(BuildContext context) { 
    super.build(context);
 }
}

【讨论】：

【解决方案4】：

尝试将您的子视图包含在带有偏移量的堆栈中。它帮助我保存了底部栏导航的状态。

【讨论】：