Flutter easyrefresh示例 上拉加载+下拉刷新
官方示例,简单改了下,实现功能为主。
代码如下:
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示例 上拉加载+下拉刷新的更多相关文章
- Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
- 上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
- RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
- APICloud上啦加载下拉刷新模块
apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...
- 微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- Flutter上拉加载下拉刷新---flutter_easyrefresh
前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...
- 微信小程序 - 上拉加载下拉刷新
点击下载示例:小程序 - 上拉刷新下拉加载
- flutter 下拉加载+下拉加载
功能: 1.下拉加载 2.上拉加载 3.显示加载图标 4.更新列表数据,隐藏加载图标 flutter库: flutter_spinkit: ^3.1.0 加载图标 其他:加载列表需要列表,基于上一节的 ...
- SwipeRefreshLayout实现上拉加载下拉刷新
package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...
随机推荐
- VS2010 insert Oracle数据库
背景:批量插入上万条数据到Oracle数据库的一张表里. 工具:VS2010. 因为是访问远程数据库,所以需要先装一个oracle client. 使用oracle客户端的方式访问数据库,需要添加对其 ...
- 论自动AC机
O(∩_∩)O哈哈~第一篇原创博客.终于结束了我“无敌转载王”的称号了!!!好开心! (⊙v⊙)嗯,看到标题觉得我是神犇的人,请再次仔细看看标题,是“自动AC”,而非“AC自动”哦!这是利用lemon ...
- 「CF375E」Red and Black Tree「树形DP」
题意 给定一个结点颜色红或黑的树,问最少进行多少次交换黑.红结点使得每个红结点离最近的黑结点距离\(\leq x\). \(1\leq n \leq 500, 1 \leq x \leq 10^9\) ...
- linux系列(十三):less命令
1.命令格式: less [参数] 文件 2.命令功能: less 与 more 类似,但使用 less 可以随意浏览文件,而 more 的功能不如less,而且 less 在查看之前不会加载整个文 ...
- nginx + keepalived双活配置
一.安装nginx 我们这边默认安装的nginx的是1.12.2的版本,所以我们需要安装1.16.1版本的nginx的,才好,所以我们这边先更新yum源,步骤如下: 1.添加yum源: [root@s ...
- 命令行中生成 md5、sha1、sha256 校验和
在测试过程中有时候需要对某个文件Hash值进行校验,如接口返回一个文件下载地址及hash值,那么除了对比平台端展示和接口下发是否一至,还有一个办法就是命令行使用相关命令 1.Window 注:我是在g ...
- Hadoop hadoop(2.9.0)---uber模式(小作业“ubertask”优化)
前言: 在有些情况下,运行于Hadoop集群上的一些mapreduce作业本身的数据量并不是很大,如果此时的任务分片很多,那么为每个map任务或者reduce任务频繁创建Container,势必会增加 ...
- php手记之04-tp5数据库操作
//--------查询// 原生sql语句查询 // $ret = Db::query("select * from tp5_user where id>10"); // ...
- sqlserver 触发器实例
实例1:update USE [数据库名称]GO/****** Object: Trigger [dbo].[触发器名称] Script Date: 05/08/2014 12:40:25 ***** ...
- cross-env 使用方式
cross-env能跨平台设置及使用环境变量 大多数情况下,在windows平台下使用类似于: NODE_ENV=production的命令行指令会卡住,windows平台与POSIX在使用命令行时有 ...