Flutter 实现下拉刷新上拉加载的示例代码
作者:程序园中猿 时间:2023-08-18 21:31:16
本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下:
效果图
使用方法
添加依赖
dependencies:
pull_to_refresh: ^1.5.7
导入包
import 'package:pull_to_refresh/pull_to_refresh.dart';
页面代码样例
class _MyHomePageState extends State<MyHomePage> {
List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];
RefreshController _refreshController =
RefreshController(initialRefresh: false);
void _onRefresh() async {
// monitor network fetch
await Future.delayed(Duration(milliseconds: 1000));
// if failed,use refreshFailed()
_refreshController.refreshCompleted();
}
void _onLoading() async {
// monitor network fetch
await Future.delayed(Duration(milliseconds: 1000));
// if failed,use loadFailed(),if no data return,use LoadNodata()
items.add((items.length + 1).toString());
if (mounted) setState(() {});
_refreshController.loadComplete();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SmartRefresher(
enablePullDown: true,
enablePullUp: true,
header: WaterDropHeader(),
footer: CustomFooter(
builder: (BuildContext context, LoadStatus mode) {
Widget body;
if (mode == LoadStatus.idle) {
body = Text("pull up load");
} else if (mode == LoadStatus.loading) {
body = CircularProgressIndicator();
} else if (mode == LoadStatus.failed) {
body = Text("Load Failed!Click retry!");
} else if (mode == LoadStatus.canLoading) {
body = Text("release to load more");
} else {
body = Text("No more Data");
}
return Container(
height: 55.0,
child: Center(child: body),
);
},
),
controller: _refreshController,
onRefresh: _onRefresh,
onLoading: _onLoading,
child: ListView.builder(
itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
itemExtent: 100.0,
itemCount: items.length,
),
),
);
}
}
完整源代码
https://gitee.com/cxyzy1/flutter_pulldown_refresh
来源:https://juejin.im/post/5de5becdf265da05de588214
标签:Flutter,下拉刷新,上拉加载
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Maven的几个常用plugin
2021-12-05 13:36:28
Android ScrollView滑动实现仿QQ空间标题栏渐变
2021-06-13 16:32:19
![](https://img.aspxhome.com/file/2023/9/102579_0s.gif)
Java中的接口多继承机制
2023-08-28 06:13:48
![](https://img.aspxhome.com/file/2023/4/79824_0s.png)
java+jsp+struts2实现发送邮件功能
2023-08-28 18:25:27
![](https://img.aspxhome.com/file/2023/7/61287_0s.jpg)
Mybatis一对多查询的两种姿势(值得收藏)
2023-07-01 00:20:08
![](https://img.aspxhome.com/file/2023/9/61669_0s.png)
Java线程的start方法回调run方法的操作技巧
2023-11-11 06:02:00
![](https://img.aspxhome.com/file/2023/7/59157_0s.png)
springBoot项目如何实现启动多个实例
2021-09-22 00:13:47
![](https://img.aspxhome.com/file/2023/0/70500_0s.png)
C#实现简单合并word文档的方法
2022-10-27 10:50:00
Spring Boot实现STOMP协议的WebSocket的方法步骤
2022-10-01 07:12:27
Android Socket实现多个客户端聊天布局
2022-10-09 08:31:19
![](https://img.aspxhome.com/file/2023/2/130342_0s.jpg)
在VSCode里使用Jupyter Notebook调试Java代码的详细过程
2022-03-25 07:14:12
![](https://img.aspxhome.com/file/2023/4/129174_0s.png)
Android程序美化之自定义ListView背景的方法
2023-12-13 17:52:57
Android 接收微信、QQ其他应用打开第三方分享功能
2022-06-12 18:11:58
![](https://img.aspxhome.com/file/2023/7/113287_0s.jpg)
Java中的动态和静态编译实例详解
2021-07-30 15:25:10
Java 中很好用的数据结构EnumSet
2023-12-06 09:37:23
![](https://img.aspxhome.com/file/2023/5/64395_0s.webp)
C语言多种获取字符串长度的方法
2021-07-01 16:30:29
![](https://img.aspxhome.com/file/2023/0/114940_0s.png)
Java 二分查找算法的实现
2022-07-23 11:10:13
Mybatis 缓存原理及失效情况解析
2022-12-04 07:28:43
![](https://img.aspxhome.com/file/2023/6/82996_0s.jpg)
Android Retrofit 2.0框架上传图片解决方案
2022-02-23 06:25:27
解决Spring Cloud Feign 请求时附带请求头的问题
2022-12-11 04:29:46