用户登录

向下滚动内容列表页面,到列表底部的时候,可以让应用加载新的列表数据,然后把它显示出来。或者不一定非得完全滚动到底部,可以在距离底部还有一块距离的时候,就去加载新的列表数据。

打开 post_index_store.dart,在里面先添加几个 getter ,这个 getter 返回的值的类型是 double,名字是 scrollOffset,返回的值可以是 scrollController 里的 offset,这个 offset 就是已经滚动的距离。

下面再添加一个 getter ,返回的值的类型是 ScrollPosition ,名字是 scrollPosition ,返回的值的是 scrollController.position ,这个 position 里面有一些东西。比如最小还有最大可以滚动的大小。

然后再定义一个 getter,返回的值的类型是 bool ,名字是 touchDown,如果它的值是 true,我们就可以让应用加载新的列表数据。返回的值要判断一些条件,先判断一下 scrollPosition.userScrollDirection 是不是等于 ScrollDirection.reverse,判断一下滚动方向是不是向下滚动 。

并且 !scrollPosition.outOfRange,并且没有超出可以滚动的范围,最后还得再判断一下 scrollOffset 是不是大于等于 scrollPosition.maxScrollExtent - 500 ,这个 maxScrollExtent 就是列表最大可以滚动的位置,这里让它等去 500 ,是因为我们想提前加载列表数据。

监听滚动

打开 post_index.dart,这里可以先给滚动控制器添加一个监听器,用一下 store.scrollController.addListener,提供一个 onScroll。这样滚动列表的时候就会执行这个 onScroll 方法。

然后再添加一个 dispose 方法,在这个方法里面要去掉在滚动控制器上添加的监听器。用一下 store.scrollController.removeListener,把 onScroll 交给它。

下面可以再添加一个方法,名字叫 onScroll ,在这个方法里判断一下 store.touchDown,如果它是 true,可以暂时先在控制台上输出一行文字,输出的是 加载新页面数据。

测试

重新启动一下应用,打开调试控制台。然后在模拟器上测试一下,向下滚动这个列表页面,滚动到一定程度的时候,你会发现,会在控制台上输出 加载新页面数据。

定义加载新页面数据的滚动位置《 Flutter 移动端实例:滚动加载 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点