此功能属于仿网易云音乐App的一部分
介绍
项目进度： 我的、发现、云村和视频页都已实现，眼瞅着一期就结束了，此时产品经理走来...
image
图示
image
说明
这是一张网易云音乐的‘发现’页（首页），可以看到其中有一些红、蓝虚线标出的矩形区域，这些区域均可以水平滑动。而将视角进一步抬高，可以看到顶层还有4个tab:
image
可见项目主体包含我的、发现、云村和视频4个页面，由pageview组成，也支持横向滑动，而另外三个页面如发现页一样内部也含有诸多水平滑动的widget，可参见:
那么就引申出了一个问题，如：示例图中的 A(listview) 区域，当我在A位置进行水平滑动时，是滑动最外层的页面，还是由A来处理呢？
image
在不做任何处理的话，是由A 来具体响应用户的滑动的，当滑动到头部或者末尾(edge)，将无法继续滑动，如果松开手指，再次向edge滑动，依然是 A 来消费，即 A widget 表现出无法滑动的状态。
那么用户在滑动列表到头/尾部时，如果想切换到下一个页面，如：
发现页面 -> 云村页
靠继续滑动时行不通的，他只能去找没有滑动功能的widget来滑动，或者去点击上方的tab，这时用户大概是这个表情：
image
网易云音乐在这里做了很好的处理（如果不好，请call产品），即：
在用户滑动到 边界(edge)时，如果继续向那个方向滑动，默认他是要切换到下一页
来~ 看个图
效果图
这个是demo的效果，测试机没有网易云，所以就拿这个演示了
image
下面我们来实现它
代码实现
NotificationListener
页面中水平滑动的widget非常多，而且结合项目进展，一个一个处理极不划算，这里我们就可以用
NotificationListener<T extends Notification>
来解决这个问题，它可以监听到所包裹的子widget以及下方整个树的事件，具体类型根据 T有关。
这里我们仅需要监听滚动事件所以代码如下：
Widget wrapWithNotify(Widget child){
return NotificationListener<ScrollNotification>(
child: child,
onNotification: handleNotification,
);
}
页面布局代码如下:
Widget buildBody(){
return PageView(
controller: pageController,
onPageChanged: (index){
tabController.switchPage(index);
pageIndex = index;
},
children: <Widget>[
wrapWithNotify(MinePage().generateWidget()), //我的
wrapWithNotify(DiscoveryPage().generateWidget()), //发现
wrapWithNotify(VillagePage().generateWidget()), //云村
wrapWithNotify(VideoPage().generateWidget()) //视频
],
);
}
这时当我们再次滚动页面内的 widget时，都会调用 handleNotification 这个方法，来看一下它。
handleNotification()
每次滚动时，此方法都会调用，并附带一个ScrollNotification参数
bool handleNotification(ScrollNotification notification)｛｝
notification 携带了滚动相关的一些值
返回true：事件将继续冒泡
false：事件将不会冒泡， 即如果外层再次包裹也不会收到了。
这样借此特性我们就可以手动将事件来交给外层pageview 或者内部‘水平widget’来消费，以达到我们要实现的效果。
再此之前，先介绍一下ScrollNotification ，它是一个抽象类，他的子类有很多，下面我们就会看到：
//以下有个限定： 用户的一次滚动操作， 按下、滑动、抬起
ScrollStartNotification //通知widget开始滚动 只会调用一次
ScrollUpdateNotification //widget滑动过程中的位置变更通知 调用多次
ScrollEndNotification //widget停止滑动 调用一次
UserScrollNotification //按照名字来看就是用户滚动时的通知，实际打log发现
//用户触屏和结束滑动会各调用一次和start、end很像
//但是按照注释来看，是用户改变滑动方向的时候会通知
//而在滚动时我改变方向并不会通知...还需要研究研究
等等...这里只提咱们用到的
代码如下：
（我将说明写在注释里，方便联系阅读。
开发时做了一些测试，同时删除了一些与当前文章无关的代码，所以下面的代码可能有些冗余，见谅。）
//一个接口，用于接收drag变动相关的操作,他有update、end、cancel三个行为
//我并没有使用它本身的方法，这里只是做一个 界定值
//（前期测试残留的，觉得可能对你有用，就没有给它优化掉）
Drag drag;
//用来描述因为Drag触发的滚动操作(实际上还分 startDetails,updateDetails，end...这里我们不用这些)
//ps:其他原因触发的滚动，此值是null
DragStartDetails dragStartDetails;
bool handleNotification(ScrollNotification notification){
//ScrollMetrics 其内部有滚动部件的描述信息和一些实时动作相关的值
// 如 :minScrollExtent /maxScrollExtent - 最小/大滚动范围
// pixels - 滚动位置， viewportDimension - 视窗大小 ,
// axisDirection - 滚动view 的滚动方向 等等，不一而足。
//如此重要，先初始化一个 metrics
final ScrollMetrics metrics = notification.metrics;
//当滑动结束时会进入此方法，我们将一些用过的值置空
if(notification is ScrollEndNotification){
drag = null;
dragPosition = null;
}
//因为我们只需要处理水平滚动所以这里做个判断
if(metrics.axis == Axis.horizontal){
//滑动开始
if(notification is ScrollStartNotification){
log('start');
if(notification.dragDetails == null) return true;
//我们保存notification的 dragDetails，
dragStartDetails = notification.dragDetails;
}
///与 start和end调用时期一样
if(notification is UserScrollNotification){
//这里我们假设 一个水平listview，左侧为头部，右侧为尾部
//此处判断 A （就是上面个 A widget） 是否已经滑动到头部，且用户继续向头部滑动
if(metrics.pixels == metrics.minScrollExtent && notification.direction == ScrollDirection.forward){
if(drag == null ){
//那么我们认为用户是想切换上一页了
//pageController 是外层4个页面的pageview控制器
//此时我们将通知的dragStartDetails 传到pagecontroller的drag里
//即，将用户的滑动信息和外层的 pageview controller 挂钩
drag = pageController.position.drag(dragStartDetails, () {
//滑动结束后会调用
drag = null;
});
}
//此方法与上面相同，朝尾部滑动的处理
// 因为我后面可能还有其他细化操作，所以这里拆成了两个if
}else if(metrics.pixels == metrics.maxScrollExtent && notification.direction == ScrollDirection.reverse){
if(drag == null ){
drag = pageController.position.drag(dragStartDetails, () {
drag = null;
});
}
}
}
}
return true;
}
至此这个功能我们就实现了，而为何
//即，将用户的滑动信息和外层的 pageview controller 挂钩
drag = pageController.position.drag(dragStartDetails, () {
//滑动结束后会调用
drag = null;
});
外层pageview 可以消费到这个事件，我会在稍后关于listview的文章介绍（其实我还没有梳理完全，不敢瞎说）。
Demo
关于滑动Widget的结构的相关文章
另外，如果想对这个flutter 滚动的构造有一个了解，可以阅读下面的文章，应该会对你有所帮助。
网友评论