Flutter PullToRefresh上下拉刷新控件

Flutter为我们提供了相当丰富的控件，但是有时候还是不能满足大家的需求，官方的控件只有下拉刷新，没有上拉加载，感觉很别扭；我从安卓转过来的，所以我做了一套和安卓原生的一样效果的控件

首先请允许我介绍下我控件：理论上适配所有可滑动View, Android IOS 双平台通用. 上下拉分别可控，可单独使用上拉或下拉；支持上下拉头完全自定义，现已支持是否加载成功的状态通知，支持通过方法调用触发下拉刷新，重点：很少BUG！很少BUG！很少BUG！看下效果图吧

可能好多人只是想用这个控件，那我们先看看怎么去使用，后面我们会讲解代码

第一步添加下面的代码到 pubspec.yaml 文件

dependencies:pulltorefresh_flutter: "^0.1.9"

第二步如果使用本项目默认图片，请下载 https://raw.githubusercontent.com/baoolong/PullToRefresh_Flutter/master/images/refresh.png 等图片到你的images文件夹下，并在Pubspec.yaml添加如下配置

assets:- images/refresh.png

第三步在你要使用的文件里导包

import 'package:pulltorefresh_flutter/pulltorefresh_flutter.dart';

第四步写你的业务代码（以下为示例代码）

这里我示例加载github首页，由于我自定义了下拉头的文字提示，所以就有 “快尼玛给老子松手！”这个变量了，哈哈哈；要注意的是，有时ListView的Item太少而不能铺满屏幕，ListView 不能Scroll，导致PullToRefresh也不可使用，同时为了兼容IOS，所以初始化ScrollPhysics必须是RefreshAlwaysScrollPhysics。所以要定义RefreshAlwaysScrollPhysics这个变量，别忘了定义这个变量哦！build方法里面使用了上下拉控件：PullAndPush，并对各个参数进行了定义，下面是代码

///PullAndPush可以使用默认的样式，在此样式的基础上可以使用default**系列的属性改变显示效果，也可以自定义RefreshBox的样式（footerRefreshBox or headerRefreshBox）,也就是说可以定义其中一个，另一个用默认的，也可以全部自定义
///isPullEnable;isPushEnable属性可以控制RefreshBox 是否可用，无论是自定义的还是默认的
///PullAndPush can use the default style，Based on this style, you can use the properties of the default** series to change the display，
///You can also customize the style of the RefreshBox (footerRefreshBox or headerRefreshBox), which means you can define one of them, and the other can be customized by default or all.
class PullAndPushTestState extends State<PullAndPushTest> with TickerProviderStateMixin{List<String> addStrs=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];List<String> strs=["1","2","3","4","5","6","7","8","9","0"];ScrollController controller=new ScrollController();//For compatibility with ios ,must use RefreshAlwaysScrollPhysics ;为了兼容ios 必须使用RefreshAlwaysScrollPhysicsScrollPhysics scrollPhysics=new RefreshAlwaysScrollPhysics();//使用系统的请求var httpClient = new HttpClient();var url = "https://github.com/";var _result="";String customRefreshBoxIconPath="images/icon_arrow.png";AnimationController customBoxWaitAnimation;int rotationAngle=0;String customHeaderTipText="快尼玛给老子松手！";String defaultRefreshBoxTipText="快尼玛给老子松手！";///button等其他方式，通过方法调用触发下拉刷新TriggerPullController triggerPullController=new TriggerPullController();@overridevoid initState() {super.initState();//这个是刷新时控件旋转的动画，用来使刷新的Icon动起来customBoxWaitAnimation=new AnimationController(duration: const Duration(milliseconds: 1000*100), vsync: this);//第一次layout后会被调用WidgetsBinding.instance.addPostFrameCallback((context){print("addPostFrameCallback is  invoke");//triggerPullController.triggerPull();});}@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text("上下拉刷新"),),body: new PullAndPush(//如果你headerRefreshBox和footerRefreshBox全都自定义了，则default**系列的属性均无效，假如有一个RefreshBox是用默认的（在该RefreshBox Enable的情况下）则default**系列的属性均有效//If your headerRefreshBox and footerRefreshBox are all customizable，then the default** attributes of the series are invalid，// If there is a RefreshBox is the default（In the case of the RefreshBox Enable）then the default** attributes of the series are validdefaultRefreshBoxTipText: defaultRefreshBoxTipText,headerRefreshBox: _getCustomHeaderBox(),triggerPullController:triggerPullController,//你也可以自定义底部的刷新栏；you can customize the bottom refresh boxanimationStateChangedCallback:(AnimationStates animationStates,RefreshBoxDirectionStatus refreshBoxDirectionStatus){_handleStateCallback( animationStates, refreshBoxDirectionStatus);},listView: new ListView.builder(//ListView的ItemitemCount: strs.length,//+2,controller: controller,physics: scrollPhysics,itemBuilder: (BuildContext context,int index){return  new Container(height: 35.0,child: new Center(child: new Text(strs[index],style: new TextStyle(fontSize: 18.0),),),);}),loadData: (isPullDown) async{await _loadData(isPullDown);},scrollPhysicsChanged: (ScrollPhysics physics) {//这个不用改，照抄即可；This does not need to change，only copy itsetState(() {scrollPhysics=physics;});},));}
}

上面代码那么多变量，看起来是不是很懵逼？到底有啥用呢？下面我来一一展示变量的用途

triggerPullController	可通过此对象的方法调用主动触发下拉刷新
loadData	加载数据的回调
scrollPhysicsChanged	ListView的scrollPhysics发生改变时回调，通过SetState改变ListView的Physics，这个回调直接抄demo里面的就行
listView	ListView控件
isShowLeadingGlow	在拉到顶部时，是否显示光晕效果,默认不显示
isShowTrailingGlow	在拉到底部时，是否显示光晕效果,默认不显示
backgroundColor	设置上下拉框的颜色
refreshIconPath	设置上下拉框中旋转的图片的路径
tipText	设置上下拉框中的提示文字
textColor	设置上下拉框中文字的颜色
isPullEnable	是否使用下拉刷新，默认启用
isPushEnable	是否启用上拉加载，默认启用；
glowColor	设置光晕的颜色，默认为蓝色；
headerRefreshBox ； footerRefreshBox	分别自定义下拉头Box 和上拉头部Box（就是说你想用自己设计的箭头，自己的字体，自己的等待动画，自己的图片等，那你就设计一个头部替换我写的默认头部）
animationStateChangedCallback	动画各种状态下的回调

你想怎么搞里面是不是都有啊！很随意的。

下面是我自定义的头部,感觉还行，可以参考下↓↓↓

Widget _getCustomHeaderBox(){return new Container(color: Colors.grey,child:  new Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Align(alignment: Alignment.centerLeft,child: new RotatedBox(quarterTurns: rotationAngle,child: new RotationTransition( //布局中加载时动画的weightchild: new Image.asset(customRefreshBoxIconPath,height: 45.0,width: 45.0,fit:BoxFit.cover,),turns: new Tween(begin: 100.0,end: 0.0).animate(customBoxWaitAnimation)..addStatusListener((animationStatus) {if (animationStatus == AnimationStatus.completed) {customBoxWaitAnimation.repeat();}}),),),),new Align(alignment: Alignment.centerRight,child:new ClipRect(child:new Text(customHeaderTipText,style: new TextStyle(fontSize: 18.0,color: Color(0xffe6e6e6)),),),),],));}

↓↓↓有人吐槽Pub上的上下拉刷新的状态不好控制，不准确，我的状态可谓是丰富啊（这都是删了一些状态后的结果），先看看我的回调状态：animationStateChangedCallback的回调状态

DragAndRefreshEnabled	RefreshBox高度达到50 , 可触发上下拉刷新，可提示用户松手即可刷新
StartLoadData	开始加载数据时，可显示加载等待的动画
LoadDataEnd	加载完数据时；RefreshBox会留在屏幕2秒，并不马上消失，提示用户是否加载成功
RefreshBoxIdle	RefreshBox已经消失，并且闲置，不管是未触发刷新还是刷新结束，可通过该通知重值图片，提示等状态

有了上面的状态，简直可以为所欲为啊，是不是能满足大多数的需求，看下代码是怎么用的吧

void _handleStateCallback(AnimationStates animationStates,RefreshBoxDirectionStatus refreshBoxDirectionStatus){switch (animationStates){//RefreshBox高度达到50,上下拉刷新可用;RefreshBox height reached 50，the function of load data is  availablecase AnimationStates.DragAndRefreshEnabled:setState(() {//3.141592653589793是弧度，角度为180度,旋转180度；3.141592653589793 is radians，angle is 180⁰，Rotate 180⁰rotationAngle=2;});break;//开始加载数据时；When loading data startscase AnimationStates.StartLoadData:setState(() {customRefreshBoxIconPath="images/refresh.png";customHeaderTipText="正尼玛在拼命加载.....";});customBoxWaitAnimation.forward();break;//加载完数据时；RefreshBox会留在屏幕2秒，并不马上消失，这里可以提示用户加载成功或者失败// After loading the data，RefreshBox will stay on the screen for 2 seconds, not disappearing immediately，Here you can prompt the user to load successfully or fail.case AnimationStates.LoadDataEnd:customBoxWaitAnimation.reset();setState(() {rotationAngle = 0;if(refreshBoxDirectionStatus==RefreshBoxDirectionStatus.PULL) {customRefreshBoxIconPath = "images/icon_cry.png";customHeaderTipText = "加载失败！请重试";}else if(refreshBoxDirectionStatus==RefreshBoxDirectionStatus.PUSH){defaultRefreshBoxTipText="可提示用户加载成功Or失败";}});break;//RefreshBox已经消失，并且闲置；RefreshBox has disappeared and is idlecase AnimationStates.RefreshBoxIdle:setState(() {rotationAngle=0;defaultRefreshBoxTipText=customHeaderTipText="快尼玛给老子松手！";customRefreshBoxIconPath="images/icon_arrow.png";});break;}}

是不是思路清晰明确啊，也不是很难嘛

↓↓↓最后我补充下加载数据的方法，这个方法必须是一个Future方法，变量isPullDown用来判断是下拉还是上拉，true表示下拉刷新，False表示上拉加载

Future _loadData(bool isPullDown) async{try {var request = await httpClient.getUrl(Uri.parse(url));var response = await request.close();if (response.statusCode == HttpStatus.ok) {_result = await response.transform(utf8.decoder).join();setState(() {//拿到数据后，对数据进行梳理if(isPullDown){strs.clear();strs.addAll(addStrs);}else{strs.addAll(addStrs);}});} else {_result = 'error code : ${response.statusCode}';}} catch (exception) {_result = '网络异常';}print(_result);}

到这里，怎么使用上下拉控件已经讲完了，虽然用起来有那么一点点复杂，可是自定义程度高，可扩展性强，稳定度高，需要写的代码思路也清晰，最最主要的：BUG少；如果在使用的过程中有什么问题，请留言，随时为你解答

最后附上源码地址：https://github.com/OpenFlutter/PullToRefresh；

里面有很多更酷的控件，欢迎Star；如果喜欢Flutter，可以加入我们哦，我们的QQ群是：892398530

Flutter PullToRefresh上下拉刷新控件相关推荐

Android之一起玩转下拉刷新控件
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/50830639 本文出自:[顾林海的博客] ##前言下拉刷新控件,想必 ...
android多个下拉控件,Android实现支持所有View的通用的下拉刷新控件
下拉刷新对于一个app来说是必不可少的一个功能,在早期大多数使用的是chrisbanes的PullToRefresh,或是修改自该框架的其他库.而到现在已经有了更多的选择,github上还是有很多体验 ...
Android 怎么实现支持所有View的通用的下拉刷新控件
转载请标明出处: http://blog.csdn.net/u010386612/article/details/51372696 本文出自:[AItsuki的博客] 下拉刷新对于一个app来说是必不 ...
Android自定义控件实战——下拉刷新控件终结者：PullToRefreshLayout
说到下拉刷新控件,网上版本有很多,很多软件也都有下拉刷新功能.有一个叫XListView的,我看别人用过,没看过是咋实现的,看这名字估计是继承自ListView修改的,不过效果看起来挺丑的,也没什么扩 ...
Android仿苹果版QQ下拉刷新实现(一) ——打造简单平滑的通用下拉刷新控件
前言: 因为公司人员变动原因,导致了博主四个月没有动安卓,一直在做IOS开发,如今接近年前,终于可以花一定的时间放在安卓上了.好了,废话不多说,今天我们要带来的效果是苹果版本的QQ下拉刷新.首先看一下 ...
android google 下拉刷新 csdn,android SwipeRefreshLayout google官方下拉刷新控件
下拉刷新功能之前一直使用的是XlistView很方便我前面的博客有介绍 SwipeRefreshLayout是google官方推出的下拉刷新控件使用方法也比较简单今天就来使用下SwipeRefres ...
Android SwipeRefreshLayout 官方下拉刷新控件介绍
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24521483 下面App基本都有下拉刷新的功能,以前基本都使用XListView ...
android 下拉刷新组件,android系统自带下拉刷新控件的实现
android系统自带的下拉刷新控件SwipeRefreshLayout位于android.support.v4.widget包下,实现步骤如下: 1.在布局文件中添加该控件,该控件一般作为父控件,而 ...
pb自定义控件事件_Android WebView与下拉刷新控件滑动冲突的解决方法
使用WebView时一般会在外层使用下拉刷新控件如(SwipeRefreshLayout).但是测试时会发现网页无法上拉,往上滑动就会触发下拉刷新控件的refresh事件.所以这里记录一下解决该问题的 ...

Flutter PullToRefresh上下拉刷新控件

Flutter PullToRefresh上下拉刷新控件相关推荐

最新文章

热门文章