Flutter Tab 切换时保留tab的状态

Posted 2023-03-28

参考技术A

当我们在Flutter开发中，使用到Tabbar 切换页面时，我们会发现一个现象，
就是我从 tab1 => tab2 = > tab3 ,控制台打印的日志，会发现 分别走了 tab1页面 tab2页面 tab3 页面的 初始化状态函数 initState() ,这是正常的操作；
但是如果我再从 tab 3 => tab2 => tab1,这时我们发现， 同样的也走了 tab2，1的 initState() 函数，也就是说** initState（）** 会被重复调用， 这时，我们就需要切换tab时记录tab 页面的状态，避免 initState（） 函数被重复调用。

解决方法：其实很简单，我们只需要在tab 页面
添加 AutomaticKeepAliveClientMixin ，并实现对应的方法 bool get wantKeepAlive => true; ，就可啦！！

Flutter切换tab后保留tab状态

Flutter切换tab后保留tab状态

概述

Flutter中为了节约内存不会保存widget的状态，widget都是临时变量。当我们使用TabBar，TabBarView是我们就会发现，切换tab后再重新切换回上一页面，这时候tab会重新加载重新创建，体验很不友好。Flutter出于自己的设计考虑并没有延续android的ViewPager这样的缓存页面设计，毕竟控件两端都要开发，目前还在beta版本有很多设计还不够完善，但是设计的拓展性没得说，flutter还是为我们提供了解决办法。我们可以强制widget不显示情况下保留状态，下回再加载时就不用重新创建了。

AutomaticKeepAliveClientMixin

AutomaticKeepAliveClientMixin 是一个抽象状态，使用也很简单，我们只需要用我们自己的状态继承这个抽象状态，并实现 wantKeepAlive 方法即可。

继承这个状态后，widget在不显示之后也不会被销毁仍然保存在内存中，所以慎重使用这个方法。

详细官方文档请看这里。
这里还有一个说的比较详细的 demo。

class PageContentState extends<PageContent> 
    with AutomaticKeepAliveClientMixin 

    @override
    bool get wantKeepAlive => true;

DEMO

// main.dart
// 核心代码如下：

class PageContent extends StatefulWidget 
  @override
  State<StatefulWidget> createState() => new PageContentState();


class PageContentState extends State<PageContent>
    with AutomaticKeepAliveClientMixin


  @override
  bool get wantKeepAlive => true;

  ···


class V2EX extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primaryColor: Colors.white),
        home: new DefaultTabController(
          length: choices.length,
          child: new Scaffold(
            appBar: new AppBar(
              title: new Center(
                child: new Container(
                  width: 300.0,
                  child: new TabBar(
                    indicatorColor: Colors.black54,
                    isScrollable: true,
                    tabs: choices.map((Choice choice) 
                      return new Container(
                        width: 125.0,
                        child: new Tab(
                          text: choice.title,
                        ),
                      );
                    ).toList(),
                  ),
                ),
              ),
            ),
            body: new TabBarView(
              key: new Key('Home Page'),
              children: choices.map((Choice choice) 
                return new Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new ChoiceCard(choice: choice),
                );
              ).toList(),
            ),
          ),
        ));
  


const List<Choice> choices = const <Choice>[
  const Choice(title: '热门'),
  const Choice(title: '最新'),
];

class ChoiceCard extends StatelessWidget 
  const ChoiceCard(Key key, this.choice) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) 
    return new Card(
      color: Colors.white,
      child: PageContent(),
    );