官方示例,简单改了下,实现功能为主。

代码如下:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart'; class BasicPage extends StatefulWidget {
@override
_BasicPageState createState() => _BasicPageState();
} class _BasicPageState extends State<BasicPage> {
List<String> addStr = ["", "", "", "", "", "", "", "", "", ""];
List<String> str = ["", "", "", "", "", "", "", "", "", ""];
GlobalKey<EasyRefreshState> _easyRefreshKey = GlobalKey<EasyRefreshState>(); @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("EasyRefresh"),
),
body: Center(
child: new EasyRefresh(
key: _easyRefreshKey, child: new ListView.builder(
//ListView的Item
itemCount: str.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
height: 70.0,
child: Card(
child: new Center(
child: new Text(
str[index],
style: new TextStyle(fontSize: 18.0),
),
),
));
}),
onRefresh: () async {
await new Future.delayed(const Duration(seconds: ), () {
setState(() {
str.clear();
str.addAll(addStr);
});
});
},
loadMore: () async {
await new Future.delayed(const Duration(seconds: ), () {
if (str.length < ) {
setState(() {
str.addAll(addStr);
});
}
});
},
)), );
}
}

特殊效果+底部按钮,代码如下:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_easyrefresh/bezier_circle_header.dart';//如果要使用炫酷的样式需要引入,不同的样式引入不同的文件,详见官方api
import 'package:flutter_easyrefresh/bezier_bounce_footer.dart';//如果要使用炫酷的样式需要引入,不同的样式引入不同的文件,详见官方api class BasicPage extends StatefulWidget {
@override
_BasicPageState createState() => _BasicPageState();
} class _BasicPageState extends State<BasicPage> {
List<String> addStr = ["", "", "", "", "", "", "", "", "", ""];
List<String> str = ["", "", "", "", "", "", "", "", "", ""];
GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>();
GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>();
GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>(); @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("EasyRefresh"),
),
body: Center(
child: new EasyRefresh(
key: _easyRefreshKey,
refreshHeader: BezierCircleHeader(
key: _headerKey,
color: Theme.of(context).scaffoldBackgroundColor,
),
refreshFooter: BezierBounceFooter(
key: _footerKey,
color: Theme.of(context).scaffoldBackgroundColor,
),
child: new ListView.builder(
//ListView的Item
itemCount: str.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
height: 70.0,
child: Card(
child: new Center(
child: new Text(
str[index],
style: new TextStyle(fontSize: 18.0),
),
),
));
}),
onRefresh: () async {
await new Future.delayed(const Duration(seconds: ), () {
setState(() {
str.clear();
str.addAll(addStr);
});
});
},
loadMore: () async {
await new Future.delayed(const Duration(seconds: ), () {
if (str.length < ) {
setState(() {
str.addAll(addStr);
});
}
});
},
)),
persistentFooterButtons: <Widget>[
FlatButton(
onPressed: () {
_easyRefreshKey.currentState.callRefresh();
},
child: Text("refresh", style: TextStyle(color: Colors.black))),
FlatButton(
onPressed: () {
_easyRefreshKey.currentState.callLoadMore();
},
child: Text("loadMore", style: TextStyle(color: Colors.black)))
],
);
}
}

效果图:

Flutter easyrefresh示例 上拉加载+下拉刷新的更多相关文章

  1. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  2. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  3. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  4. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  5. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  6. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  7. Flutter上拉加载下拉刷新---flutter_easyrefresh

    前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...

  8. 微信小程序 - 上拉加载下拉刷新

    点击下载示例:小程序 - 上拉刷新下拉加载

  9. flutter 下拉加载+下拉加载

    功能: 1.下拉加载 2.上拉加载 3.显示加载图标 4.更新列表数据,隐藏加载图标 flutter库: flutter_spinkit: ^3.1.0 加载图标 其他:加载列表需要列表,基于上一节的 ...

  10. SwipeRefreshLayout实现上拉加载下拉刷新

    package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...

随机推荐

  1. 2018 南京网络预赛Sum - 离线分段打表

    题意 设 $f(n)$ 为 $n=ab$ 的方案数,其中 $a,b$ 为无平方因子数. 例如,$f(6)=4$,因为 $6 = 1 \times 6 = 2 \times 3 = 3 \times 2 ...

  2. bzoj3097 hash killer 1——构造题

    题意 在 $u64$ 自然溢出下,请输出一串字符串和 $L$,使得对任意 $Base$ 都能找到两个长度为 $L$ 的字串的 $Hash$ 值相同. 分析 $u64$ 自然溢出等价于两个哈希值模 $2 ...

  3. 源码安装mongoDB

    1.安装启动 下载源码包,官方地址: wget http://downloads.mongodb.org/linux/mongodb-linux-x86_64-rhel62-3.4.22.tgz 解压 ...

  4. AS400遇到的一些问题和解决办法

    1.没有权限进入distribution directory wrklnk 'QDLS\'    >User not enrolled in system distribution direct ...

  5. Linux FC/iSCSI存储设备管理系列(一):Linux系统设备驱动入门

    Linux FC/iSCSI存储设备管理系列(一):Linux系统设备驱动入门 转载请在文首保留原文出处:EMC中文支持论坛 - https://community.emc.com/go/chines ...

  6. tarjan模板完整版

    https://www.luogu.org/problem/P2863 #include<cstdio> #include<vector> using namespace st ...

  7. HTTP状态码和支持的方法

    1. HTTP常用状态码   200 ok 客户端请求成功 400 bad request 客户端请求有语法错误,不能被服务器所理解 401 unauthorized 请求要求身份验证,对于登录后请求 ...

  8. Java常用工具类之数据库操作辅助类DBUtil.java

    package com.qushida.util; import java.beans.BeanInfo; import java.beans.Introspector; import java.be ...

  9. Spring框架各模块功能介绍

    一. Spring是什么? Spring由Rod johnson开发: 是一个非常活跃的开源框架: 它帮助分离项目组件(对象)之间的依赖关系: 它的主要目的是简化企业开发 二. Spring的核心概念 ...

  10. Go 与 JSON

    Go 中通过标准库encoding/json.encoding.xml.encoding/asn1和其他库对 JSON.XML.ASN.1 和其他类型的标准的编码和解码提供了良好的支持,这里对使用最多 ...