flutter滚动到底部_Flutter 上拉加载更多终极解决方案实现

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

项目代码地址

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

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

loadMore.gif

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

首先分析一下页面状态.

数据加载状态

当前什么也没做(网络请求前,网络请求成功)

数据加载中

数据加载失败(业务逻辑错误)

数据加载网络异常

数据状态

没有数据

有数据

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

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

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

滑动到底部加载更多

滑动到还有多少个不可见项加载更多

某个特定项被加载时加载更多.

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

假设我们有这样的需求:

只在服务端有更多数据才允许加载更多

向上滑动时才允许加载更多

上一次调用过程没有发生错误和异常才允许加载更多

发生错误或异常后点击最后一项才允许加载更多.

代码实现

用枚举表示数据加载状态

/// 数据加载状态

enum PageState {

None, // 现在什么也没做(网络请求前,网络请求完成)

Loading, // 加载中

LoadingError, // 加载失败(业务逻辑错误)

LoadingException, // 网络异常

}

用bool表示是否有数据

/// 是否有数据

bool get hasData => this.length > 0;

因此根据上面的分析我们可以得到如下加载更多基类

代码解析

三个需要重载的方法

bool hasMore();

根据具体的业务和服务返回数据清空 判断数据是否已经加载完成

getRequest(bool isRefresh, int currentPage, int pageSize);

根据参数调用后台服务

Future handlerData(MODEL model, bool isRefresh);

处理数据,将数据放入到数据列表中,通常在这里需要计算出 bool hasMore() 方法的返回值

其他方法及属性

_mData = [];

用于存储服务请求回来的列表数据

PageState _pageState = PageState.None;

存储页面当前状态

bool get hasData => this.length > 0;

页面是否已经加载了数据, 有些时候需要总是显示有数据时的页面, 可以重写这个方法返回 true

Future obtainData([bool isRefresh = false]) async

用于页面请求数据

/// [DATA] 列表中的数