Flutter——实现网易云音乐的滑动冲突处理效果

6,373 阅读6分钟

系列文章

此功能属于仿网易云音乐App的一部分 

仿网易云音乐App(基础版)

实现网易云音乐的渐进式卡片切换

Flutter 自定义View——仿同花顺自选股列表

Flutter自定义View——仿高德三级联动Drawer

另类设计,提升页面开发效率,简化跳转以及传值

介绍

项目进度: 我的、发现、云村和视频页都已实现,眼瞅着一期就结束了,此时产品经理走来...

图示

说明

这是一张网易云音乐的‘发现’页(首页),可以看到其中有一些红、蓝虚线标出的矩形区域,这些区域均可以水平滑动。而将视角进一步抬高,可以看到顶层还有4个tab:

可见项目主体包含我的、发现、云村和视频4个页面,由pageview组成,也支持横向滑动,而另外三个页面如发现页一样内部也含有诸多水平滑动的widget,可参见:

Flutter——仿网易云音乐App

那么就引申出了一个问题,如:示例图中的 A(listview) 区域,当我在A位置进行水平滑动时,是滑动最外层的页面,还是由A来处理呢?

在不做任何处理的话,是由A 来具体响应用户的滑动的,当滑动到头部或者末尾(edge),将无法继续滑动,如果松开手指,再次向edge滑动,依然是 A 来消费,即 A widget 表现出无法滑动的状态。

那么用户在滑动列表到头/尾部时,如果想切换到下一个页面,如:

发现页面 ->  云村页

靠继续滑动时行不通的,他只能去找没有滑动功能的widget来滑动,或者去点击上方的tab,这时用户大概是这个表情:

网易云音乐在这里做了很好的处理(如果不好,请call产品),即:

在用户滑动到 边界(edge)时,如果继续向那个方向滑动,默认他是要切换到下一页
来~ 看个图

效果图

这个是demo的效果,测试机没有网易云,所以就拿这个演示了

下面我们来实现它

代码实现

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

仿网易云音乐App

关于滑动Widget的结构的相关文章

另外,如果想对这个flutter 滚动的构造有一个了解,可以阅读下面的文章,应该会对你有所帮助。

PageView的PageController源码分析笔记

PageView源码和Gesture竞技场消歧的浅析