Flutter实现切换页面/tab后保持原页面状态

在Flutter应用中,导航栏或Tab切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,显然这样增加了额外的开销,并且带来了不好的用户体验。页面保持状态,不重绘,在app中很重要,比如看着朋友圈/热门微博,看到一半,需要切换到其他tab设置点东西,再切换回来,这个时候肯定不需要页面重绘,然后从头开始看吧,而是希望直接接着前面的状态继续看。

这样我们就需要用到页面保持状态,使他不销毁不重绘。

AutomaticKeepAliveClientMixin

我们只需要在导航内需要保持页面状态的子页State中,继承AutomaticKeepAliveClientMixin并重写wantKeepAlivetrue即可。

BottomNavigationBar+PageView+AutomaticKeepAliveClientMixin

sub_demo.dart

上面我们已经标出三个重要的位置,这里再强调一下:

  1. with AutomaticKeepAliveClientMixin{
  2. bool get wantKeepAlive => true;
  3. super.build(context);

补充

上面的是用于两级页面/tab切换保存状态的,但如果是涉及到三级切换,即下导航,上导航,子导航这种,详细参考这篇文章:

https://zhuanlan.zhihu.com/p/58582876

标签:
  • N/A