Tabbar+TabView来回切换免重绘,仿原生ViewPage+Fragment压栈

首先看本文实现效果:


Tabbar+TabView来回切换免重绘,仿原生ViewPage+Fragment压栈_第1张图片

关于TabBar切换免重绘呢,目前知道两种,第一种解决方法就是官方的解决方法,通过AutomaticKeepAliveClientMixin来保留之前的状态,然后这种呢才了解到会非常的影响性能,还有一种是参考了鱼丸大神的用PageView代替TabView,这样呢在UI交互的体验上又有点不足,如果每次切换TabBar一定会调用initState的话,我们何不如用一个中间值来保存上一次页面状态呢,

我们依旧采用TabBar+TabView,设置同一个Controller,这样在UI交互上没有什么改变,然后将每一个Page的内容独立成单个dart文件,在函数的最上面放一个int a;

在build里面return一个很基础的if语句,if(a==null){a=0},if(a==0){},其中这里面返回你主页面的wedget,再写一个if(a==1){},在其中返回你的主页面中子页面页面的wedget,

有人就会疑问为什么我要写int a;if(a==null){a=0}而不最初int a= 0呢,这样就能直接加载主页面了,没错,不过当initState调用后就会导致a永远都是0,你后面子页面所对应a的值的保存就失效了。

如果你想来回切换的同时保留你的子页面,只需要在跳入你的子页面的同时调用setState()内容为a=1,比如onTap()=>setState(a=1),或者其他对按钮的监听,

这样再来回切换中即使调用了initState,也通过了if语句if(a==1)返回了你的子页面,这里做到了仿原生ViewPage加Fragment中addPlace压栈栈的效果,那如何再次返回你的主页面呢,这里用到了一个监听返回按钮WillPopScope中的onWillPop方法,在里面再次写上setState(a=0),这里做到了仿原生ViewPage加Fragment回退栈的效果

这样确实有一个缺点是只做到了伪重绘,即使做到了保留子页面,每次其实还是会回到子页面的初始状态,但这样的却可以解决一些简单的布局,而且不会存在内存消耗问题

最后贴代码


Tabbar+TabView来回切换免重绘,仿原生ViewPage+Fragment压栈_第2张图片

https://github.com/Nightmare-MYS/MYSTab

作者只是一个flutter的初学者,代码如果有哪里不规范的地方可以直接指出来

你可能感兴趣的:(Tabbar+TabView来回切换免重绘,仿原生ViewPage+Fragment压栈)