likes
comments
collection
share

探索 Flutter 模拟事件触发

作者站长头像
站长
· 阅读数 23
前言

探索 Flutter 模拟事件触发

如果可以模拟 PointerEvent 进行分发,那么在应用中就可以通过 代码 来触发手势事件,这样就能解放双手。如果结合语音监听,通过代码处理,说话也能触发手势操作,岂不美哉。 作为探索完 手势机制滑动机制 ,又有完成这两本小册的我,感觉这个问题应该可解。下面就将整个问题的解决过程进行梳理,带大家再认识一下手势底层的相关实现。


一、模拟按下事件

1. 思路分析1

PointerEvent 作为手势机制中被传递的数据,它记录着触点的 id坐标触点类型 等信息。所以如果有办法发送一个 PointerDownEvent 的消息,不就表示按下了吗?

探索 Flutter 模拟事件触发


2. 自己分发事件

然后想到手势事件分发是由 GestureBinding 处理的,而我们可以通过 GestureBinding.instance 获取 GestureBinding 对象。那是不是意味着,可以自己来分发一个 PointerDownEvent 的消息。于是创建如下示例界面:上部有两个按钮分别用于 模拟滑动模拟点击

探索 Flutter 模拟事件触发

我们现在的目标是通过 模拟点击 可以点击右下角的加号按钮,从而让上面黄色区域内的数字自加;通过 模拟滑动 让列表滑动。


于是写了如下 48 行的代码通过 GestureBinding 对象的 dispatchEvent 来分发事件:

探索 Flutter 模拟事件触发

现在问题来了,第二入参需要传入 HitTestResult 对象。

探索 Flutter 模拟事件触发

但它是一个可空的入参,所以传个 null 试试:

GestureBinding.instance!.dispatchEvent(p0, null);

很不出所料地,抛了异常,看来这样直接发送消息似乎并不是正解。那么来分析一下这样为何不可。

探索 Flutter 模拟事件触发


3. GestureBinding#dispatchEvent 的逻辑处理

下面通过调试来看一下 GestureBinding#dispatchEvent 的逻辑处理:402 行表示,当 hitTestResultnull 时,当前的 event 对象类型必须是 PointerAddedEventPointerRemovedEvent 。而我们上面传入 PointerDownEvent ,使用肯定会抛异常。

探索 Flutter 模拟事件触发

所以现在的问题是,如果我们无法创建 HitTestResult ,就无法通过 dispatchEvent 方法来分发 PointerDownEvent 事件。但 HitTestResult 是从 hitTest 收集的,我们似乎很难去主动创建,似乎问题进入了死胡同。


二、单击事件是如何触发的

1. 回顾单击事件的触发

如下是点击加好按钮时 FloatingActionButton#onPressed 回调触发的方法栈情况,可以看到是在分发 PointerUpEvent 类型事件下触发单击事件的:

探索 Flutter 模拟事件触发


2. 单击事件分发的 PointerEvent

如下所示,首先会分发 PointerAddEvent 事件,此时 hitTestResultnull

探索 Flutter 模拟事件触发

接下来分发 PointerDownEvent 事件,可以看出此时 hitTestResult 就已经非空了,这说明在分发 PointerAddEvent 事件后,分发 PointerDownEvent 事件前,肯定有对 HitTestResult 进行收录的处理。

探索 Flutter 模拟事件触发

最后分发 PointerDownEvent 事件,然后就出发了单击事件的回调。

探索 Flutter 模拟事件触发


3. HitTestResult 的收集

那接下来看一下 PointerDownEvent 事件分发分发前, HitTestResult 是如何被收集的。其实想知道这点很简单,dispatchEvent 既然要传入 HitTestResult 对象,只要通过调试看一下这个对象的来源即可: 只要往下看两个方法栈,很容易定位到在 GestureBinding._handlePointerEventImmediately 方法中当 eventPointerDownEventPointerSignalEventPointerHoverEvent 时,都会创建 HitTestResult 对象,在通过 hitTest 方法来收集测试结果。

探索 Flutter 模拟事件触发

探索 Flutter 模拟事件触发


三、模拟事件触发的实现

如下效果所示:通过 模拟点击 可以点击右下角的加号按钮,从而让上面黄色区域内的数字自加;通过 模拟滑动 让列表滑动。这样我们就实现了通过代码触发手势事件

探索 Flutter 模拟事件触发探索 Flutter 模拟事件触发
1. 单击事件

其实我们只需要通过 GestureBinding#handlePointerEvent 依次分发这三个 PointerEvent ,就能模拟单击事件的触发了。没错,就是这么简单,但其中涉及到的手势体系知识,还是很值得回味的。 *注:其中 Offset(322.8, 746.9) 是触点的位置,是刚才通过调试看到的 + 位置。

void _pressAdd() {
  const PointerEvent addPointer =  PointerAddedEvent(
      pointer: 0,
      position: Offset(322.8, 746.9)
  );
      const PointerEvent downPointer =  PointerDownEvent(
      pointer: 0,
      position: Offset(322.8, 746.9)
  );
  const PointerEvent upPointer =  PointerUpEvent(
      pointer: 0,
      position: Offset(322.8, 746.9)
  );
  GestureBinding.instance!.handlePointerEvent(addPointer);
  GestureBinding.instance!.handlePointerEvent(downPointer);
  GestureBinding.instance!.handlePointerEvent(upPointer);
}

2. 滑动事件的触发

如下,滑动事件的触发关键点在于 tag1 处,通过 for 循环模拟 20 次 偏移量是 20 的向上滑动事件。

void _pressMove() async {
  const PointerEvent addPointer =  PointerAddedEvent(
      pointer: 1,
      position: Offset(122.8, 746.9)
  );
  const PointerEvent downPointer =  PointerDownEvent(
      pointer: 1,
      position: Offset(122.8, 746.9)
  );
  GestureBinding.instance!.handlePointerEvent(addPointer);
  GestureBinding.instance!.handlePointerEvent(downPointer);
  
  double dy = 20;
  double updateCount = 20;
  for (int i = 0; i < 20; i++) { // tag1
    await Future.delayed(const Duration(milliseconds: 6));
    PointerEvent movePointer =  PointerMoveEvent(
        pointer: 1,
        delta: Offset(0, -dy),
        position: Offset(122.8, 746.9 - i * dy)
    );
    GestureBinding.instance!.handlePointerEvent(movePointer);
  }
  
  PointerEvent upPointer = PointerUpEvent(
      pointer: 1,
      position: Offset(122.8, 746.9 - dy * updateCount)
  );
  GestureBinding.instance!.handlePointerEvent(upPointer);
}

这样就可以发现:只要我们按照各手势检测器竞技胜利的规则进行模拟处理 PointerEvent 事件,就可以通过代码完成我们想要触发的手势,是不是感觉非常棒。感觉可以结合一下 计时器 通过发送 一系列手势 来完成一些引导操作,或者操作演示。

探索 Flutter 模拟事件触发

转载自:https://juejin.cn/post/7057680571157184549
评论
请登录