Flutter滑动停止事件ScrollEndNotification

使用ScrollEndNotification可能要注意的点。

发现问题

在做Flutter流畅度优化之过度绘制的时候发现了一个体验问题--滑动过程中就发生了视频加载,如图所示,可以看到滑走的视频都会变成loading状态:

正常情况下应该在滑动停止再进行加载,避免不必要的耗时操作。这里依赖的滑动停止事件是ScrollEndNotification,经过测试,在完整的一次滑动过程中的确会在完全停止后回调它,这是符合预期的;但是在快速滑动时,也就是发生多次滑动,滑动还处于Fling阶段就回调了,所以才会有上图的表现。

定位原因

ScrollEndNotification到底能否准确描述为“滑动完全停止”?如果不能,Flutter是否还提供其他方法呢?带着这两个疑问来看下具体实现。

首先来分析下为何多次滑动在手指按下时都先回调ScrollEndNotification。在 ScrollPosition启动一个滑动任务(beginActivity)中找到了答案,会先停止掉旧的滑动事件(didEndScroll)再开始新的滑动事件(didStartScroll)。

void beginActivity(ScrollActivity? newActivity) {
  if (newActivity == null)
    return;
  bool wasScrolling, oldIgnorePointer;
  if (_activity != null) {
    oldIgnorePointer = _activity!.shouldIgnorePointer;
    wasScrolling = _activity!.isScrolling;
    if (wasScrolling && !newActivity.isScrolling)
      didEndScroll(); // notifies and then saves the scroll offset
    _activity!.dispose();
  } else {
    oldIgnorePointer = false;
    wasScrolling = false;
  }
  _activity = newActivity;
  if (oldIgnorePointer != activity!.shouldIgnorePointer)
    context.setIgnorePointer(activity!.shouldIgnorePointer);
  isScrollingNotifier.value = activity!.isScrolling;
  if (!wasScrolling && _activity!.isScrolling)
    didStartScroll();
}

既然如此,再来看下ScrollEndNotification本身提供的信息能否能帮助区分是哪种停止:

class ScrollEndNotification extends ScrollNotification {
  ScrollEndNotification({
    required super.metrics,
    required BuildContext super.context,
    this.dragDetails,
  });
  final DragEndDetails? dragDetails;
}

主要是这两方面信息:

(1)ScrollMetrics表示当前可视区ViewPort和滑动位置等信息,常用属性如

  • pixels :当前滑动位置
  • maxScrollExtent/minScrollExtent :可最大/最小可滑动长度(如列表顶部/底部)
  • axisDirection/axis:滚动方向/轴
  • outOfRange:是否超过边界(pixels < minScrollExtent || pixels > maxScrollExtent)
  • atEdge:是否达到边界(pixels == minScrollExtent || pixels == maxScrollExtent)
  • extentBefore :滑出ViewPort顶部的长度(如列表顶部滑出屏幕的长度)
  • extentInsideViewPort内部长度(如屏幕内的列表长度)
  • extentAfter :列表中未滑入ViewPort部分的长度(如列表底部未显示到屏幕内的长度)

(2)DragEndDetails 表示滑动停止相关信息,主要是速度信息,常用属性如

  • velocity:指针停止接触屏幕时的移动速度
  • primaryVelocity:指针停止时沿主轴移动的速度

然而这个速度信息并非所有情况都会返回,若拖动结束的残余速度足以进行减速运动此时会返回空,只有当速度太小直接停止滑动的才有值,在本例中返回的都是null。看来并不能直接通过ScrollEndNotification知道什么时候滑动完全停止。而在Flutter熟知的其他滑动监听器也看了下:

(1)滑动控制器 ScrollController,通过addListener方式增加监听器,主要还是滑动本身信息

  • offset:滑动偏移量
  • position:滑动位置信息,如minScrollExtent顶部位置、maxScrollExtent底部位置

(2)手势监听器 GestureDetector,可以监听单击、双击、长按、多指、缩放、拖动、滑动等手势,其中滑动相关监听事件有

  • onPanDown:手指按下事件,回调信息DragDownDetails
  • onPanUpdate:手指滑动事件,回调信息DragUpdateDetails
  • onPanEnd:滑动停止事件,回调信息DragEndDetails(就是前面提到的)

因为本例中的监听的对象本身已处理了手势,外部也无法获得滑动事件的处理权了。

解决办法

综上,目前没有很好的办法可以准确描述快速滑动下的滑动停止。那换个思路,在ScrollEndNotification延迟一定时间再去做启播,既可以解决误启动的问题,还可以避免和曝光检测任务同时抢占资源,从而提升滑动流畅度。

通过实验测试,延迟30ms是较为有效的,即下一次ScrollStartNotification事件和上一次ScrollEndNotification事件差值基本在30ms内,且不会过度影响用户观看体验。

bool _onScroll(ScrollNotification notification) {
  if (notification is ScrollStartNotification) {
    feedScrollHandler?.scrollStart();//滑动开始,取消检测曝光逻辑和自动播放逻辑
  } else if (notification is ScrollEndNotification) {
    feedScrollHandler?.scrollEnd(delay: FeedScrollBaseHandler.endScrollPlayDelay); //滑动结束,准备检测曝光逻辑和自动播放逻辑
  }
  return false;
}

改动后的效果如图,对比了改前后快速滑动下的帧率也确实得到了提升:

总结

在使用ScrollEndNotification监听滑动停止事件时,需要注意快速滑动场景下会产生多次回调,关注下是否会对业务产生不好的影响。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容