上一篇文章用Scaffold widget搭建了一个带底部导航栏的的项目架构，这篇文章就来介绍一下在flutter中怎么实现一个带下拉刷新和上拉加载更多的一个列表，这里用到了pull_to_refresh的第三方库。
1、在pubspec.yaml文件中加入一行代码，导入第三方库。
dependencies:
pull_to_refresh: ^1.6.1
2、新建一个类，继承自StatefulWidget来添加一个新的页面，在build方法中，返回一个 Scaffold 控件，在appbar参数中可以定义你想要的标题栏样式，在body参数中定义你要实现页面的主题内容，这里我要实现一个带刷新和加载功能的列表，所以我们在外层嵌套一个pull_to_refresh库中的SmartRefresher控件，下面是该控件的构造方法，支持下面这些参数，常用的参数都已经备注。
SmartRefresher(
{Key key,
@required this.controller,//控制内部状态 ，必选参数
this.child, //你的内容部件
this.header, //头部指示器构造，默认值 ClassicHeader
this.footer, //尾部指示器构造 默认值 ClassicHeader
this.enablePullDown: true, //激活下拉刷新，默认开启
this.enablePullUp: false,// 激活上拉加载更多，默认关闭
this.enableTwoLevel: false, //是否允许打开头部指示器二楼的功能，默认不允许
this.onRefresh, //进入下拉刷新时的回调
this.onLoading, //进入上拉加载时的回调
this.onTwoLevel, //当准备打开二楼时的回调
this.onOffsetChange,
this.dragStartBehavior,
this.primary,
this.cacheExtent,
this.semanticChildCount,
this.reverse,
this.physics,
this.scrollDirection,
this.scrollController})
其中有一个必传参数，controller（@required修饰的参数表示必传的意思），该参数是RefreshController类型参数，可以通过该对象的一些方法主动触发下拉刷新，上拉加载，开启二楼等主动功能，
// 请求顶部指示器刷新,触发onRefresh
void requestRefresh(
{Duration duration: const Duration(milliseconds: 300),
Curve curve: Curves.linear});
// 请求底部指示器加载数据,触发onLoading
void requestLoading(
{Duration duration: const Duration(milliseconds: 300),
Curve curve: Curves.linear}) ;
// 主动打开二楼
void requestTwoLevel(
{Duration duration: const Duration(milliseconds: 300),
Curve curve: Curves.linear});
// 顶部指示器刷新成功,是否要还原底部没有更多数据状态
void refreshCompleted({bool resetFooterState:false});
// 不显示任何状态,直接变成idle状态隐藏掉
void refreshToIdle();
// 顶部指示器刷新失败
void refreshFailed();
// 关闭二楼
void twoLevelComplete(
{Duration duration: const Duration(milliseconds: 500),
Curve curve: Curves.linear};
// 底部指示器加载完成
void loadComplete();
// 底部指示器进入一个没有更多数据的状态
void loadNoData();
// 底部加载失败
void loadFailed()
// 刷新底部指示器状态为idle
void resetNoData();
更多功能可以参考pull_to_refresh主页，这是目前dart中功能最全的刷新加载更多组件拉。
3、在StatefulWidget中嵌套一个列表组件，在flutter中官方给我们提供了一个可以用来加载列表数据的一个组件ListView，和Android中的ListView控件名称一样，很容易理解。
但是一般情况下我们会用ListView.builder的来构建一个列表组件，因为直接使用ListView构建的时候，不管有多少条数据都会一次性加载出来，但是ListView.builder构建的话，有一个延时加载策略，值加载当前屏幕显示的数据，相对而言其性能会更好写。所以当数据比较多的时候，推荐用ListView.builder构建来构建列表组件。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("文章列表")),
body: SmartRefresher(
controller: _refreshController,
enablePullUp: true,
onRefresh: onRefresh, //自定义的刷新方法
onLoading: loadMore, //自定义加载更多方法
header: WaterDropHeader(),
footer: ClassicFooter(),
child: ListView.builder(
itemBuilder: (context, index) => ItemPage(_articles[index]),
itemCount: _articles.length)));
}
这里要注意一个问题，之前我一位ListView如果想要填充满整个屏幕的话是需要设置高度充满的，所以我就自作聪明的在ListView的外面嵌套来一个Expanded来填充布局铺满屏幕，结果弄来半天，都不能手动下拉刷新和加载更多，最后，分析发现是填充的问题，结果去掉之后就ok了，并且ListView和Android 中一样都是可以根据item的个数自动适应是否铺满全屏，所以外面不需要再嵌套其他的约束组件来。
网友评论