Flutter PageView组件怎样让子组件不会重复加载

Posted 2023-03-09

参考技术A 在做一个美女相册flutter demo app的时候发现，每次切换页面的时候，里面的子页面（GridView widget）每次都会重新加载，就像下面这样：

这样的体验肯定不行。经过一番调研后发现竟然还需要做蛮多事情的。

先看看目前的实现：

这个就是包含在PageView里面的子组件，很简单，通过FutureBuilder调一个接口返回数据后build一个GridView。很显然每次切换Tab的时候，应该是每次都进入了_BeautyListWidgetState的build方法，导致每次都会重新刷新。那要怎样才能做到加载后切换不再刷新呢？

需要实现 wantKeepAlive 方法（返回true），另外在build方法最前面需要 调用 super.build(context); ，如下：

所以你需要在initState方法中创建这个Future。如下：

好了。效果实现了。不过稍后还需要看看AutomaticKeepAliveClientMixin源码，看看它是如何做到的。

Reference: https://stackoverflow.com/questions/51224420/flutter-switching-to-tab-reloads-widgets-and-runs-futurebuilder