Flutter上拉加载下拉刷新---flutter_easyrefresh
前言
Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式。Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色的动画效果,并且对自定义支持非常好。接下来给大家介绍的就是,Flutter版本的刷新UI库---flutter_easyrefresh,在功能方面已经很接近Android的SmartRefreshLayout。
Github地址:flutter_easyrefresh
介绍
正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似,同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer,但是它并没有局限性,你可以很轻松的自定义。使用Flutter强大的动画,甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大,稳定,成熟的下拉刷新框架。
特点功能:
- 支持Andorid(光晕),ios(越界回弹)效果
- 支持任意的ScrollView控件,如果不是进行简单封装即可(所以理论是所有控件)
- 支持自定义并且已经集成了很多炫酷的 Header 和 Footer
- 支持下拉刷新、上拉加载(可自动)
- 支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
传送门
Demo
简单用例
1.在 pubspec.yaml 中添加依赖
//pub方式
dependencies:
flutter_easyrefresh: last_version
//导入方式
dependencies:
flutter_easyrefresh:
path: 项目路径
2.在布局文件中添加 EasyreFresh
import 'package:flutter_easyrefresh/easy_refresh.dart';
....
GlobalKey<EasyRefreshState> _easyRefreshKey = new GlobalKey<EasyRefreshState>();
....
new EasyRefresh(
key: _easyRefreshKey,
child: ScrollView(),
onRefresh: () async{
....
},
loadMore: () async {
....
},
)
3.触发刷新和加载动作
// 如果不需要可以不用设置EasyRefresh的key
_easyRefreshKey.currentState.callRefresh();
_easyRefreshKey.currentState.callLoadMore();
使用指定的 Header 和 Footer
import 'package:flutter_easyrefresh/easy_refresh.dart';
....
GlobalKey<RefreshHeaderState> _headerKey = new GlobalKey<RefreshHeaderState>();
GlobalKey<RefreshFooterState> _footerKey = new GlobalKey<RefreshFooterState>();
....
// 因为EasyRefresh会对Header和Footer进行更新,为了与用户保持统一的操作状态,必须设置key
// 不同的Header和Footer可能有不同的参数设置
new EasyRefresh(
refreshHeader: MaterialHeader(
key: _headerKey,
),
refreshFooter: MaterialFooter(
key: _footerKey,
),
child: ScrollView(),
....
)
QQ讨论群 - 554981921
进群须知
这个群不仅仅是解决EasyreFresh的问题,任何Flutter相关的问题都可以进行讨论。正如它的名字一样,有问必答,只要群主有时间,都会帮大家一起解决问题。
Flutter上拉加载下拉刷新---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 ...
- SwipeRefreshLayout实现上拉加载下拉刷新
package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...
- MJRefresh(上拉加载下拉刷新)
整理自:https://github.com/CoderMJLee/MJRefresh#%E6%94%AF%E6%8C%81%E5%93%AA%E4%BA%9B%E6%8E%A7%E4%BB%B6%E ...
- 利用iscroll实现上拉加载下拉刷新
1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...
随机推荐
- idea在maven打包时运行Test测试, 导致打包失败, 乱七八糟的错误
在maven打包时运行Test测试, 导致打包失败, 乱七八糟的错误 在maven projects中图标toggle'skip Tests' Mode //宏杰帮助 网上案例:https://blo ...
- [MCM] K-mean聚类与DBSCAN聚类 Python
import matplotlib.pyplot as plt X=[56.70466067,56.70466067,56.70466067,56.70466067,56.70466067,58.03 ...
- [CQOI2018]交错序列
嘟嘟嘟 要是求交错序列的个数和就好了,那我一秒就能切. 换成这个,我就不会了. 我一直想枚举1的个数,然后算出在长度为\(n\)的序列里,有多少个合法的序列,然后又觉得这好像是什么插板法,但是每一个盒 ...
- maven 配置文件settings.xml设置
打开这个配置文件 在相应标签下配置这些内容 //将中央仓库修改为阿里云的仓库 <mirrors> <mirror> <id>nexus-aliyun</id& ...
- leetCode练习1
代码主要采用C#书写 题目: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你 ...
- 【移动端】移动端字体单位font-size选择px还是rem
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可对于需要适配各种移动设备,使用rem,例如只需要适配iphone和iPad等分辨率差别比较挺大的设备 html{font-size: ...
- Spring Security(十四):5.4 Authorize Requests
Our examples have only required users to be authenticated and have done so for every URL in our appl ...
- IDEA+TestNG
1.常用注解 2.手把手教你掌握必备测试框架testNG:http://www.51testing.com/zhuanti/TestNG.htm [testNG常用注解] 1 @Test:标记一个类或 ...
- vue 图片切换动态绑定
<img :src="切换条件 ? require('xxx.png') : require('xxx.png')" />
- 隐写工具Hydan的安装使用方法
Hydan是可以在32位ELF二进制文件里隐藏信息的工具,主要原理是利用了i386指令中的冗余信息. 官网地址:http://www.crazyboy.com/hydan/ 但这个工具最后更新好像是在 ...