用過RefreshIndicator官方的下拉刷新，只能說效果不適合國內的產品，其實還是很簡潔的。。但是身在天朝，產品經理就是爸爸

FlutterCandies QQ群:181398081

下面這些應該是國內下拉刷新的樣子吧。。原諒我的隨主流。。 沒圖沒真相，請上我做好的效果圖

先說下實現吧,整個狀態判斷都在_innerhandleScrollNotification方法里面 通過對下拉總的距離_DragOffset來判斷當前的狀態.狀態比官方的多一個error

enum RefreshIndicatorMode {drag, // Pointer is down.armed, // Dragged far enough that an up event will run the onRefresh callback.snap, // Animating to the indicator's final "displacement".refresh, // Running the refresh callback.done, // Animating the indicator's fade-out after refreshing.canceled, // Animating the indicator's fade-out after not arming.error, //refresh failed } 復制代碼

其實我這個做的主要是提供整個下拉刷新的狀態，然后用戶可以根據自己的需求，定義出不一樣的效果，這樣比較靈活

const PullToRefreshNotification({Key key,@required this.child,@required this.onRefresh,this.color,this.pullBackOnRefresh: false,this.maxDragOffset,this.notificationPredicate = defaultNotificationPredicate,}) : assert(child != null),assert(onRefresh != null),assert(notificationPredicate != null),super(key: key); 復制代碼

pullBackOnRefresh 當在refresh狀態的時候是否要回彈 maxDragOffset 下拉的最大距離

PullToRefreshContainer 是用來創建下拉刷新效果的組件，它有一個回調 PullToRefreshScrollNotificationInfo 是告訴使用者當前的狀態，并且提供了默認的refresh組件（安卓下面是圈圈，ios下面是菊花轉）

typedef PullToRefreshContainerBuilder = Widget Function(PullToRefreshScrollNotificationInfo info);class PullToRefreshScrollNotificationInfo {final RefreshIndicatorMode mode;final double dragOffset;final Widget refreshWiget;final PullToRefreshNotificationState pullToRefreshNotificationState;PullToRefreshScrollNotificationInfo(this.mode, this.dragOffset,this.refreshWiget, this.pullToRefreshNotificationState); } 復制代碼

Sample code

我一共寫了3個效果，下面我講下Appbar這種，其他原理都是一樣的。當你掌握技巧之后。你能構建出任意你想要的效果。

Widget buildPulltoRefreshAppbar(PullToRefreshScrollNotificationInfo info) {print(info?.mode);print(info?.dragOffset);// print("------------");var action = Padding(child: info?.refreshWiget ?? Icon(Icons.more_horiz),padding: EdgeInsets.all(15.0),);var offset = info?.dragOffset ?? 0.0;// var mode = info?.mode;// if (mode != null && mode == RefreshIndicatorMode.done) {// //showToast("Refresh done");// }return SliverAppBar(pinned: true,title: Text("PullToRefreshAppbar"),centerTitle: true,expandedHeight: 200.0 + offset,actions: <Widget>[action],flexibleSpace: FlexibleSpaceBar(//centerTitle: true,title: Text(info?.mode?.toString() ?? "",style: TextStyle(fontSize: 10.0),),collapseMode: CollapseMode.pin,background: Image.asset("assets/467141054.jpg",//fit: offset > 0.0 ? BoxFit.cover : BoxFit.fill,fit: BoxFit.cover,)));} 復制代碼

代碼就是這么簡單，通過告訴你的狀態，將appbar的expandedHeight進行改變，達到整個background 拉伸的效果，并且改變右上角的action。

最后放上 Github pull_to_refresh_notification，如果你想要其他效果或者有什么不明白的地方，都請告訴我。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Flutter 下拉刷新花式玩法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。