当前位置： 移动技术网 > 移动技术>移动开发>Android > Flutter 实现下拉刷新上拉加载的示例代码

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

2020年03月09日  | 移动技术网移动技术  | 我要评论

本文介绍了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,
    ),
   ),
  );
 }
}

完整源代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网