用过RefreshIndicator官方的下拉刷新,只能说效果不适合国内的产品,其实还是很简洁的。。但是身在天朝,产品经理就是粑粑
下面这些应该是国内下拉刷新的样子吧。。原谅我的随主流。。 没图没真相,请上我做好的效果图
先说下实现吧,整个状态判断都在_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,如果你想要其他效果或者有什么不明白的地方,都请告诉我。