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

代码如下:

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. [Angular] Show a Loading Indicator for Lazy Routes in Angular

    We can easily code split and lazy load a route in Angular. However when the user then clicks that la ...

  2. 如何在没有代理的情况下编译 tidb server

    这里主要介绍 tidb server 的编译, ti kv 和 ti pd 的编译不在本文范围内: go 语言 1.11 版本之后支持 go.mod,  依赖包在 go.mod 里生成, 如果 go. ...

  3. WCF wsHttpBinding in SoapUI

    当使用wsHttpBinding,而不是平时用的webHttpBinding的时候,用soapui会报错.这个时候需要选中WS-A选项中的"Add default wsa:Action&qu ...

  4. junit报错

    java.lang.RuntimeException: iwap 环境还没有初始化,请先调用IWapContext.init(). at com.nantian.ofpiwap.IWapContext ...

  5. 重建道路 树形DP

    重建道路 树形DP 给一棵树,问最少断多少边使得这棵树树最终只有\(p​\)个节点 设计dp状态\(f[u][i][j]\)表示节点\(u\),到第\(i\)个儿子,使\(j\)个节点分离,但是不分离 ...

  6. GB∕T 35658平台过检 已通过最新的部标JT/T 808-2019, JT/T 809-2019标准检测

    2019年交通部GPS平台检测标准发生了重大变化, 原来的796平台功能标准, 变更为GB/T35658标准, 这个标准其实2017年就公布了, 实际上还是796标准, 但是检测项目,以前是可选的, ...

  7. Linux 系统监控shell脚本

    比较粗略的一个脚本:主要监控系统磁盘.CPU.内存.网络流量.tcp连接数等 代码如下: [root@test system_monitor_shell_script]# cat system_mon ...

  8. centos7 安装anaconda3

    在学习Python的时候,如果学习python3的版本,那么需要重新安装pytho3,因为系统默认的Python版本是python2,当然,有的可能需要同时保留两个版本,这里来试着使用一下anacon ...

  9. 我的BO之导航属性

    我的BO 1-我的BO之强类型 2-我的BO之数据保护 3-我的BO之状态控制 4-我的BO之导航属性 数据需要导航 数据之间普遍存在关系,做业务处理时往往也是按照关系在数据之间查询和处理.业务处理可 ...

  10. mysql的select语句

    参考: https://www.cnblogs.com/xiaoshen666/p/10824117.html https://www.cnblogs.com/zouwangblog/archive/ ...