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

 更新时间:2019年12月04日 09:21:37   作者:程序园中猿  
这篇文章主要介绍了Flutter 实现下拉刷新上拉加载的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

本文介绍了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

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

相关文章

  • 使用WEB工具快速提高Android开发效率

    使用WEB工具快速提高Android开发效率

    正所谓工欲善其事,必先利其器。学习并应用优秀的轮子,可以让我们跑的更快,走的更远。这里所指的工具是广义的,泛指能帮助我们开发的东西,或者能提高我们效率的东西,包括:开发工具,监测工具,第三方代码库等
    2016-02-02
  • 详谈Android中Matrix的set、pre、post的区别

    详谈Android中Matrix的set、pre、post的区别

    下面小编就为大家带来一篇详谈Android中Matrix的set、pre、post的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Android Handler多线程详解

    Android Handler多线程详解

    本文主要介绍Android Handler的知识,这里整理了详细的资料及简单示例代码和实现效果图,有兴趣的小伙伴可以参考下
    2016-09-09
  • 举例讲解Android应用开发中OTTO框架的基本使用

    举例讲解Android应用开发中OTTO框架的基本使用

    这篇文章主要介绍了Android应用开发中OTTO框架的基本使用讲解,文中举了创建一个单例模式的应用例子,需要的朋友可以参考下
    2016-02-02
  • eclipse中运行monkeyrunner脚本之环境搭建(4)

    eclipse中运行monkeyrunner脚本之环境搭建(4)

    这篇文章主要为大家详细介绍了eclipse中运行monkeyrunner脚本之环境搭建的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Android贝塞尔曲线实现填充不规则图形并随手指运动

    Android贝塞尔曲线实现填充不规则图形并随手指运动

    这篇文章主要为大家详细介绍了Android贝塞尔曲线实现填充不规则图形,并随手指运动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • Android videoview抢占焦点的处理方法

    Android videoview抢占焦点的处理方法

    这篇文章主要为大家详细介绍了Android videoview抢占焦点的处理方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 深入分析安卓(Android)中的注解

    深入分析安卓(Android)中的注解

    注解是我们经常接触的技术,Java有注解,Android也有注解,本文将试图介绍Android中的注解,以及ButterKnife和Otto这些基于注解的库的一些工作原理.下面一起来看看。
    2016-08-08
  • Android 广播接收器BroadcastReceiver详解

    Android 广播接收器BroadcastReceiver详解

    Android开发的四大组件分别是:活动(activity),用于表现功能;服务(service),后台运行服务,不提供界面呈现;广播接受者(Broadcast Receive),勇于接收广播;内容提供者(Content Provider),支持多个应用中存储和读取数据,相当于数据库,本篇着重介绍广播组件
    2022-07-07
  • Android仿抖音列表效果

    Android仿抖音列表效果

    这篇文章主要为大家详细介绍了Android仿抖音列表效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论