您现在的位置是:首页 > 正文

Flutter 实现上拉加载更多数据,下拉刷新

2024-04-01 00:13:37阅读 3

引言

昨天已经使用 RefreshIndicator 实现了下拉刷新数据的效果,今天,我们使用
ScrollController来实现:上拉加载更多数据,然后再将二者汇总起来~~

废话不多说,上菜,哦,不对,上图?~~

效果图

那么我们开始吧,let's go

先看今天的主菜:ScrollController

为什么说这个呢?这是因为「上拉加载更多」这个功能,Flutter 并没有为我们提供类似RefreshIndicator这样的控件,所以我们需要从「监听」入手,比如,我们在 Android 开发时,通过对 ListView 添加一个 「滚动监听」,然后为其添加headerfooter来实现。

Flutter 这里的逻辑是相通的,那么我们要给 Flutter 的 ListView 添加监听,需要用到这个 ScrollController

怎么用这个 ScrollController呢,我们跟着我们的 demo 来一遍吧

一、准备上拉加载更多的状态

这里,使用的 Flutter 中的枚举,方便后续步骤的操作

二、初始化一些变量 和 默认值,准备一些常用方法

初始化list 和 默认状态

初始化list 和 默认状态

定义设置 padding 的方法

定义设置 padding 的方法

初始化ScrollController

初始化ScrollController

ok,准备工作就做好了,都很简单,我们接着看

三、初始化最初的状态,这里我们将第一页的数据和 ScrollController的监听准备好

其中

  _scrollController.position.pixels  

是获得当前位置的像素值

_scrollController.position.maxScrollExtent

这个则是获得 SrollController 监听控件可以滚动的最大范围

那么这个判断,则是判断是否滑动到最底部,如果是的话,就开始加载更多数据

我们来看一下加载数据的方法

我们来拆一下:

第一步

最初的时候,改变加载状态,让加载状态设置为 「加载中状态:STATUS_LOADING」,这样做的目的是
进入加载中,这个时候禁止再次开启一个加载数据的方法,只要当「空闲状态:STATUS_IDEL」的时候,才允许开启加载数据的方法。

设置好状态后,必须使用 setState 去改变当前的状态,否则控件状态不能感知到。

第二步:

这一步骤是做数据的准备,因为数据的准备是 耗时 的,所以这里用到了async await,准备数据的操作并不放到setState中,数据处理好之后,再调用数据

第三步:

 

同样,在刷新好数据之后,也要对状态进行变更,从而控制 「加载布局」的展示。

至此,准备工作就做好了

四、准备上面提到的 「加载布局」

 

就是这个

我们来看下代码

这里需要重点看下

loadText这个是在 setState中要改变的

 


而 visible 则是控制 「加载布局」中的CircularProgresIndicator的隐藏和显示,这里的隐藏会直接 gone掉的哦

 

好了,最后一步

五、组装到身体

直接通过 controller属性设置上 我们准备的 _scrollController就完工了

六、释放资源

七、下拉刷新再熟悉一下

 

这里也要注意 「加载布局」的状态改变

Bingo 我们总结一下~

initState 方法
padding 方法抽取
setState() 方法
Visibility 修饰器
SizedBox 修饰器 改变 内容大小
枚举
ScrollController

感谢各位小伙伴的关注,点赞,谢谢 ~ ❤️❤️❤️

网站文章

  • Docker学习笔记(五)-Docker Compose

    Docker学习笔记(五)-Docker Compose

    背景很多应用是很复杂的,需要多个容器共同支持,任何复杂的系统可能需要启动的容器数量也很庞大,我们需要从Dockerfile build image或者docker hub拉取多个image,要创建并管理多个container,这个工作量是巨大的,docker compose应运而生。Docker Compose是什么Docker Compose帮我们启动错综复杂的容器,开发测试人员...

    2024-04-01 00:13:31
  • [Git高级教程 (一)] 通过Tag标签回退版本修复bug

    1 前言本系列之所以取名”Git高级教程”,主要是教大家解决实际工作中遇到的问题,要求读者会基本的Git用法和命令,请不要使用SourceTree这样的工具,因为它让你啥都不会、啥也不懂,git本身与Linux一脉相承,都是Linus torvalds写的嘛,所以命令行才是精髓。如果你还不会Git的话,强烈建议你学习廖雪峰的教程,简单易懂: 廖雪峰的Git教程: http://www.li

    2024-04-01 00:13:11
  • (2)机器学习任务攻略(loss太大怎么办)

    (2)机器学习任务攻略(loss太大怎么办)

    机器学习笔记

    2024-04-01 00:13:04
  • java8 stream map flatMap

    stream map flatMap

    2024-04-01 00:12:58
  • Java判断某个对象是某个类

    String s = “I AM an Object!”; boolean isObject = s instanceof Object;

    2024-04-01 00:12:31
  • Qt扫盲-QListWidget理论总结

    Qt扫盲-QListWidget理论总结

    1. 概念2. 添加列表项3. 列表其他属性4. 常用信号5. 槽函数。QListWidget 是一个继承自 QListView 的类,其实就是 QListView 的一个很经典的 列表 交互控件,在...

    2024-04-01 00:12:24
  • audio解决不能自动播放问题

    无法实现打开网页就能自动播放音乐正常情况下使用autoplay即可实现自动播放,但是现在打开网页该参数无效。

    2024-04-01 00:12:17
  • BugKu MISC 就五层你能解开吗?

    BugKu MISC 就五层你能解开吗?

    题目名称:就五层你能解开吗BugKu。

    2024-04-01 00:11:47
  • 【CV作业03】图像平滑+锐化处理

    【CV作业03】图像平滑+锐化处理

    【代码】【CV作业03】图像平滑+锐化处理。

    2024-04-01 00:11:43
  • 使用Apache服务器部署python web过程中遇到的问题及解决方法

    使用Apache服务器部署python web过程中遇到的问题及解决方法

    1. 浏览器提示Internal Server Error 分析:查看Apache错误日志。日志提示:IndentationError: expected an indented block\r,即程...

    2024-04-01 00:11:36