欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-05-08 13:15:31
本文介绍了flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下: 效果图    使用方法 添加依赖 dependencies:...

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

完整源代码

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