页面使用的代码还没来得及封装, 现有代码已经经过测试人员严格测试.请放心使用. 如果有bug欢迎提出. 具体效果可以参考 [视界北京] App

项目代码地址
对于移动开发,上拉加载更多是列表,中必不可少的一个功能, 由于上拉加载更多的逻辑相对来说比较复杂, 且变化多端, 因此 Android, IOS 都没有相应的上拉加载更多的控件提供. Flutter 作为新兴的跨平台开发方式也没有提供相应的Widget.

下面是我参考Android端加载更多, 开发的Flutter加载更多帮助类,可以适应大多数上拉加载更多的需求. 先来看一下效果图.

loadMore.gif

下面就来分析一下如何实现.

1. 首先分析一下页面状态.

   数据加载状态

   1. 当前什么也没做(网络请求前,网络请求成功)
   2. 数据加载中
   3. 数据加载失败(业务逻辑错误)
   4. 数据加载网络异常

   数据状态

   1. 没有数据
   2. 有数据
      这样两种状态组合可以得到页面的八种状态,因此我们的加载更多要在这八种状态中进行切换.

2. 其次我们来分析一下如何加载更多

   上拉加载更多的示例网上一搜一大把: 比如:

   1. 滑动到底部加载更多
   2. 滑动到还有多少个不可见项加载更多
   3. 某个特定项被加载时加载更多.

   显然这样的示例都无法满足实际开发时的需求.

   假设我们有这样的需求:

   1. 只在服务端有更多数据才允许加载更多
   2. 向上滑动时才允许加载更多
   3. 上一次调用过程没有发生错误和异常才允许加载更多
   4. 发生错误或异常后点击最后一项才允许加载更多.