参考：ListView下拉刷新与加载更多
文章目录
- 相关文章推荐
- 实现效果
- 实现分析
- 下拉刷新
- 上拉加载更多
- 源码
相关文章
Flutter 搭建具有 Drawer 和 BottomNavigationBar 的静态项目框架
Flutter Widget 静态布局实战
Flutter 容器类 Widget
Flutter 入门实现 ListView 列表页面以及收藏页面
Flutter 环境搭建以及填坑指南（Win10 系统且已有 Android 开发环境
实现效果截图
实现分析
下拉刷新 下拉刷新使用的是 RefreshIndicator组件来实现，使用伪代码如下：
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new RefreshIndicator(
onRefresh: _handleRefresh,
));
}
复制代码在body中添加RefreshIndicator 组件，在 onRefresh中实现下拉刷新的操作，这里的_handleRefresh方法代码如下：
Future _handleRefresh() async {
// 延迟3秒后添加新数据， 模拟网络加载
await Future.delayed(Duration(seconds: 3), () {
setState(() {
_suggestions.clear();
_suggestions.addAll(generateWordPairs().take(20));
return _suggestions;
});
});
}
复制代码上拉加载更多 加载更多的组件在Flutter中是没有提供的，所以我们只能自己实现，在以前Android 中上拉加载更多可以通过监听滑动来实现，这里应该也是可以这么操作的。
Flutter的ListView中有一个ScrollController属性，通过监听这个滑动来实现加载更多。
实现步骤如下：
- 定义
ScrollController _scrollController = new ScrollController(); - 在
ListView的列表中添加controller: _scrollController,
// listView 列表
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: _suggestions.length + 1,
itemBuilder: (context, i) {
// 在每一列之前，添加一个1像素高的分隔线widget
if (i.isOdd) return new Divider();
// 最后一个单词对
if (i == _suggestions.length) {
return _buildLoadMore();
} else {
return _buildRow(_suggestions[i]);
}
},
controller: _scrollController,
);
复制代码- 在
initState()方法中监听滑动，如果滑动到最后则获取加载更多的数据
@override
void initState() {
super.initState();
_suggestions.addAll(generateWordPairs().take(20));
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
_getMoreData();
}
});
}
复制代码_getMorData方法实现如下：
// 加载更多
Future _getMoreData() async {
await Future.delayed(Duration(seconds: 3), () {
setState(() {
// 这里是本地数据，因此在无网的时候也会加载数据
_suggestions.addAll(generateWordPairs().take(10));
return _suggestions;
});
});
}
复制代码至此，下拉刷新和上拉加载就实现完成了，欢迎大家一起交流，共同进步。
源码
如果对你有帮助，请帮忙点个
star，谢谢~
如有错误欢迎指出，共同进步。 源码地址：FlutterTest