flutter - 在选项卡 View 页面之间保留状态

Question

问题

我有两个 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

Answer 1

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

之后，您必须覆盖 wantKeepAlive 方法并返回 true。它看起来像:

class _SearchScreenState extends State<SearchScreen> with AutomaticKeepAliveClientMixin<SearchScreen>{

...

  @override
  Widget build(BuildContext context) { 
    // call this method
    super.build(context); 

    /// your widget here
  }

  @override
  bool get wantKeepAlive => true;

}

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