flutter - 保留选项卡视图页面之间的状态

Question

问题

我ListViews在TabBarView使用TabController.

我如何在每个之间保留状态（因为没有更好的词），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

Answer 1

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

之后，您必须覆盖该wantKeepAlive方法并返回true。

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

Answer 2

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

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

在此处查看详细信息：

• https://api.flutter.dev/flutter/widgets/PageStorageKey-class.html

• https://api.flutter.dev/flutter/widgets/PageStorage-class.html

• https://api.flutter.dev/flutter/widgets/ScrollView/controller.html

Answer 3

使用mixinandAutomaticKeepAliveClientMixin对我们的状态。

实现bool get wantKeepAlive => true;并且不要忘记调用super.build(context);你的build函数

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);
  }
}

Answer 4

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