文章目录
- 相关文章推荐
- 实现效果
- 实现分析
- 下拉刷新
- 上拉加载更多
- 源码
相关文章
Flutter 搭建具有 Drawer 和 BottomNavigationBar 的静态项目框架
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
今天的文章Flutter 实现上拉加载更多、下拉刷新分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/16311.html