Flutter 实现下拉刷新上拉加载的示例代码
程序员文章站
2022-05-08 13:15:31
本文介绍了flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下:
效果图
使用方法
添加依赖
dependencies:...
本文介绍了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, ), ), ); } }
完整源代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 如何编写一个d.ts文件的步骤详解