Flutter 下拉刷新花式玩法

用過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，若是你想要其餘效果或者有什麼不明白的地方，都請告訴我。