flutter tab与tableview配合使用bug

岁月如梭,不知不觉写flutter也一年时间了,期间也遇到很多问题,大多都解决了,今天遇到一个很奇怪的bug,虽然解决了,但是问题的产生的原因还没找到,特此记录以下,希望有知道的同行不惜赐教,万分感谢!

页面结构很简单,就是TabBar,加上TabBarView,结构如下:

image.png

具体代码如下:

image.png

正常来说这种写法是没有任何问题的,但是奇葩的bug就在这时候出现了,具体操作流程是,第一次进入这个页面,选中的肯定是popular,当我点击All这个TabBar,然后再切换到popular,news页面竟然报错了,其实这个时候NewsListPage都没有加载出来的,因为都没有初始化的啊,报错结果如下:

image.png

意思就是说页面已经被销毁了,但是我调用了他的setState()方法,如果要想不报错,就需要在setState()之前判断下mounted是否为true.
这个解决方法倒是很简单,但是问题是怎么产生的,真的百思不得其姐啊,然后就开始了漫长的寻找bug的旅途.

在寻找中,就发现一个很奇怪的问题,_NewsListPageState这个页面被创建出来了,然后又被销毁了,打印信息如下:

image.png

因为我在_NewsListPageState这个页面的initState()方法中有一个网络请求,网络请求是异步的,当我从All,切换到popular的时候竟然走了_NewsListPageState的initState()方法,发起,网络请求,然后发现我没有点击news页面,news页面没有被引用,所以就销毁了,走了dispose方法,导致了bug.

开始我怀疑我的_NewsListPageState页面写的有问题,我就把TabBarView的children里面的位置换了下,其他页面也报同样的错了,那就不是页面问题,后来发现规律了,如果我第一次进入这个页面后点击了news这个TabBar,然后再点击all,然后再点击popular,那么_WatchListPageState页面就会报错,错误和上面的错误是一样的,意思就是我点击了popular,如果news页面已经加载了,watchlist页面没有加载,watchlit页面就会报错,但是奇怪的是,如果我第一次进入这个页面后直接点击news这个TabBar,然后点击popular, _WatchListPageState这个页面并不会报错.一定要点击最后一个TabBar才能出现bug,具体原因还没有找到,但是在网上查了一圈,有人说TabBarView的bug比较多,我就用了PageView试了下,发现没有出现这个bug了,代码如下:

image.png

最后只能瞎猜测,可能TabBarView里面适合放StatelessWidget类型的Widget, PageView放StatefulWidget类型的页面比较好吧,如果哪位小伙伴知道答案的,希望多多指教!