仿网易云音乐的滑动冲突处理效果
系列文章
此功能属于仿网易云音乐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:其他原因触发的滚动,此值是nullDragStartDetails dragStartDetails; bool handleNotification(ScrollNotification notification){//ScrollMetrics 其内部有滚动部件的描述信息和一些实时动作相关的值// 如 :minScrollExtent /maxScrollExtent - 最小/大滚动范围// pixels - 滚动位置, viewportDimension - 视窗大小 ,// axisDirection - 滚动view 的滚动方向 等等,不一而足。//如此重要,先初始化一个 metricsfinal 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竞技场消歧的浅析
仿网易云音乐的滑动冲突处理效果相关推荐
- 移动应用开发——uni-app框架 仿网易云音乐播放器学习心得
目录 一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架 二.开发工具与项目创建 1.开发工具 2.项目创 ...
- 仿网易云音乐app tab栏滑动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name=&q ...
- Android漂亮的音乐歌词控件,仿网易云音乐滑动效果
前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能.网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好.于是趁有空的时间,参考了网上的部分demo, ...
- android 仿网易标签切换,高仿网易云音乐客户端的Home页面切换Tabhost-IT蓝豹
1.高仿网易云音乐客户端的Home页面切换Tabhost 高仿网易云音乐客户端的Home页面切换Tabhost,并且三角形是透明的, 实现方式,自定义AnimTabsView继承 RelativeLa ...
- 高仿网易云音乐一(可扫描本地音乐播放)
最近闲下来做了个仿网易云音乐的音乐播放器 效果图: 项目下载地址 https://github.com/PangHaHa12138/MusicPlayerdemo 闪屏 扫描本地音乐 播放 仿探探 仿 ...
- 仿网易云音乐(微信小程序版)
项目部分截图(Gif) 前言 前一阵子学习了微信小程序,为了巩固所学的知识和提高实战经验,决定自己手撸一款小程序.因为听歌一直在用网易云音乐,所以突发奇想就做一款仿网易云音乐的小程序吧!开发中遇到了很 ...
- 简单的仿网易云音乐小程序(一)
简单的仿网易云音乐小程序(一) 前言 思维图 注意事项 虚拟机调试 真机调试 主页面 搜索框 歌单列表 歌单模版 wxs filter 页面逻辑 等待搜索页面 搜索框 clearValue start ...
- 有没有java自编歌曲,高仿网易云音乐一(可扫描本地音乐播放)
最近闲下来做了个仿网易云音乐的音乐播放器 效果图: p1.png p2.png p3.png p4.png p5.png p6.png 项目下载地址 闪屏 1.gif 扫描本地音乐 3.gif 播放 ...
- WPF仿网易云音乐系列(一、左侧菜单栏:Expander+RadioButton)
WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 原文:WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 1.简介 上一篇咱们说到, ...
最新文章
- bzoj1669[Usaco2006 Oct]Hungry Cows饥饿的奶牛*
- android mp3 lrc歌词文件utf-8歌词显示为乱码,Android读取本地json文件的方法(解决显示乱码问题)...
- 计算机ai听课记录,ai ei ui评课稿听课记录
- axure9 邮件点击效果_EDM邮件营销,你不得不知道的8个指标?
- HTTP的同源策略与跨域资源共享(CORS)机制
- SQL Server 用表中已有数据造数据
- 爱奇艺视频如何联系客服?爱奇艺联系客服攻略
- 疑问:当流量被封禁之后(论资本之力):防流量被恶意盗挖(抛砖篇)
- TCP协议的三次握手及释放
- Google AdSense实战宝典
- sql函数–汉字转拼音(亲测sqlserver可用) – smileApe – 博客园
- 微软office2004 抢新体验版
- Android jetpack DataBinding 与RecyclerView
- String---自我理解
- uni-app开发模式中的选择图片(uni.chooseImage)、上传图片(uni.uploadFile)、图片预览(uni.previewImage)
- 【关于四足机器人那些事】足端轨迹规划-八次多项式轨迹
- 2021-06-21指针与变量 和字符数组作业。
- 非常详细的FastDFS整合springBoot教程-带文件下载地址
- HTTPS证书过期|SSL证书过期 |华硕路由器| NAS|Certtificate is not valid
- 绘画教程:人体结构怎么画?人体躯干怎么画?