flutter 如何自定义一个loadmore / 加载更多

写在前面

这类的库在pub上有不少

我为何要自定义呢

首先是项目须要，而且这种库普适性高，抽取出来从此复用也方便点

另外记录一下编码思路,方便后续查看

pub地址 pub国内镜像
github

使用说明

导入说明看这里 或 中文镜像

看看构造方法
一共5个属性
child是ListView

onLoadMore是加载更多时的回调,由外部实现

isFinish 加载完成

delegate是一个抽象类

有默认实现, 其中有3个方法,一个是根据状态给一个widget高度
一个是延迟加载的毫秒时间
一个是构建显示在内部的Widget,这样就彻底实现了外部可根据状态自定义Widget

LoadMoreTextBuilder 是一个根据状态构建文字的方案,默认实现了 中文/英文文字,若是只想修改文字,使用默认样式的话,能够直接用这个便可

思路

首先考虑怎么自定义
通常来说有2种方式，一个是到底部继续上拉加载，另外一种是滚动到底部自动加载，我这里采起的是到底部自动加载方案

不使用上拉加载的缘由是：滚动到底继续上拉不符合正常人习惯，若是是惯性滚动到底，谁知道你后面还有没有东西的

思考如何自定义

首先怎么样能够知道滚动到底了呢，最简单的方式，listview的最后一行build的时候必定滚动到底了

因此咱们可使用以下的方式定义

class _ListViewDemoPageState extends State<ListViewDemoPage> {  
var count = 10;  
  
@override  
Widget build(BuildContext context) {  
return ListView.builder(  
itemCount: count + 1,  
itemBuilder: _buildItem,  
);  
}  
  
Widget _buildItem(BuildContext context, int index) {  
if (index == count) {  
return Text('到底了');  
}  
return Text(index.toString());  
}  
}  
  
复制代码

这样的话 只要到最后了，你天然知道应该加载了

但是这个方法不优雅啊，咱们应该封装为Widget控件，方便复用，接下来就要开始分析怎么自定义了

首先观察ListView的构造方法
有以下几个构造方法

ListView：同名构造方法
ListView.builder
ListView.separated
ListView.custom

这里custom，须要自定义childrenDelegate 类型为SliverChildDelegate，我先暂时不考虑

看其余的三个，发现内部都实现了这个Delegate

那么咱们接收一个ListView，而后判断其中的delegate类型，而后分别进行处理不就能够了吗

这里咱们分别处理，一个是增长一个count，另外一个由于直接获取到了List ,把loadmore的widget添加进去就好了

这里就完成了第一部，在调用方不发生变化的状况下，咱们获取ListView，而且在底部添加了一个loadmore 的 widget

---

构造widget

这里要思考了，咱们一共须要几种状态
一个是默认时的状态，这个基本很难见到，也就是空闲状态
一个是加载中
一个是加载失败
一个是没更多的数据

到底这种状态，由于控件理论上不该该控制数据，因此必须由外部传入
其余的状态包含在内部

enum LoadMoreStatus {  
/// 空闲中，表示当前等待加载 
/// 
/// wait for loading 
idle,  
  
/// 刷新中，不该该继续加载，等待future返回 
/// 
/// the view is loading 
loading,  
  
/// 刷新失败，刷新失败，这时须要点击才能刷新 
/// 
/// loading fail, need tap view to loading 
fail,  
  
/// 没有更多，没有更多数据了，这个状态不触发任何条件 
/// 
/// not have more data 
nomore,  
}  
复制代码

这里写一个enum用于标示状态

---

而后就是构建widget了
这里咱们根据一些方法获得状态，而且构建一个StatefulWidget返回
这里之因此这么作，是由于若是返回是无状态的Widget，则二次滚动到底时，不会再次自动触发build方法

Widget _buildLoadMoreView() {  
if (widget.isFinish == true) {  
this.status = LoadMoreStatus.nomore;  
} else {  
if (this.status == LoadMoreStatus.nomore) {  
this.status = LoadMoreStatus.idle;  
}  
}  
return NotificationListener<_RetryNotify>(  
child: NotificationListener<_BuildNotify>(  
child: DefaultLoadMoreView(  
status: status,  
delegate: loadMoreDelegate,  
textBuilder: widget.textBuilder,  
),  
onNotification: _onLoadMoreBuild,  
),  
onNotification: _onRetry,  
);  
}  
复制代码

这里之因此有两个NotifycationListener是用于捕捉内部返回的两种动做，一个是自动刷新的动做
一个是点击重试的动做

触发动做后，我这里就会修改this.status setState，这样就会触发loadmorev View的状态变化

这里应用到了一个Flutter的机制,Notification机制,Widget内部通知,外部父节点NotificationListener进行捕获,而后根据捕获时的返回值决定是否继续传递.

---

DefaultLoadMoreView是一个StatefulWidget,在内部定义了点击事件和加载事件

由于一旦显示就自动构建,因此内部会根据状态,只有当idle状态时会传递出一个加载的通知,而后上层的Widget获取Notify后,修改状态为loading,并调取加载数据的借口

同理,当加载状态为错误时,内部就不会抛出notify了,除非在LoadMore的调用方修改finish状态,不然理论上widget就不会再变化,不论滚动与否,这时须要用户主动点击加载重试,这里在点击事件中抛出重试的通知,外部加载

这里之因此有一个延时,目的是为了防止setState太频繁形成界面不变化的问题,理论上这里大于16ms就能够了

---

而后咱们回到捕获处

后记

整体代码只有300行,能够在pub里直接使用,目前最新版本为0.1.1
pub地址 pub国内镜像
github

欢迎issue 欢迎star