前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 实现下拉刷新上拉加载的示例代码

Flutter 实现下拉刷新上拉加载的示例代码

作者头像
砸漏
发布2020-10-16 10:54:26
1.2K0
发布2020-10-16 10:54:26
举报
文章被收录于专栏:恩蓝脚本

本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下:

效果图

使用方法

添加依赖

代码语言:javascript
复制
dependencies:
 pull_to_refresh: ^1.5.7

导入包

代码语言:javascript
复制
import 'package:pull_to_refresh/pull_to_refresh.dart';

页面代码样例

代码语言:javascript
复制
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

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档