Flutter触摸事件原理

烧麦程

发布于 2022-05-10 20:50:18

1.4K0

发布于 2022-05-10 20:50:18

文章被收录于专栏：半行代码

Flutter 触摸事件的处理点在 GestureBinding中。在 GestureBinding 中存在一个 handlerPointerEvent方法，这个方法就是触摸事件在 Flutter 侧的触发点。

手势预处理

手势触发事件到事件分发给具体处理对象之前的流程如下图：

详细看下具体的源码：

void handlePointerEvent(PointerEvent event) {
   if (resamplingEnabled) {
      _resampler.addOrDispatch(event);
      _resampler.sample(samplingOffset, _samplingClock);
      return;
    }
   _resampler.stop();
   _handlePointerEventImmediately(event);
}

正常情况下会执行 _handlePointerEventImmediately 方法：

这里区分不同的手势情况做了不同的处理：

当手势是Down、Signal、Hover的时候，在移动端上我们一般关心 Down

   hitTestResult = HitTestResult();
      hitTest(hitTestResult, event.position);
      if (event is PointerDownEvent) {
        _hitTests[event.pointer] = hitTestResult;
      }

这里会创建一个 HitTestResult 对象传给 hitTest 方法，并且把处理完成后的 HitTestResult放在一个 _hitTests 的 map 里面。

当手势是抬起或者取消的时候

这次手势已经结束了，从 _hitTests 的map 里面移除这个result对象。

不是手势触发的时候，但是仍然是down状态，这里可以理解成一个控件还是处于被按下的状态中。

因为这次完整的手势并没有结束，直接获取上一次的 HitTestResult对象。

  if (hitTestResult != null ||
        event is PointerAddedEvent ||
        event is PointerRemovedEvent) {
      assert(event.position != null);
      dispatchEvent(event, hitTestResult);
    }

当 hitTestResult 不为 null 的时候，会根据这个结果进行事件的分发：那么 hitTest 是什么呢？

碰撞测试

直接按照名字看，hitTest 就是打击测试的意思。Flutter 会通过这个 test 去判断手势事件具体是交给谁处理。hitTest 会执行 RenderBinding 的 hitTest 方法，执行 renderView 的 hitTest 方法：

 @override
  void hitTest(HitTestResult result, Offset position) {
    renderView.hitTest(result, position: position); 
  }

// RenderView
 bool hitTest(HitTestResult result, { required Offset position }) {
    if (child != null)
      child!.hitTest(BoxHitTestResult.wrap(result), position: position);
    result.add(HitTestEntry(this));
    return true;
  }

如果有子节点，会先执行子节点的 hitTest。会带上手势的 position。hitTest 本身的逻辑其实就是把 HitTestEntry 加入到 result 里面。

这里的 child 是 RenderBox：

// RenderBox
bool hitTest(BoxHitTestResult result, { required Offset position }) {
  if (_size!.contains(position)) {
    if (hitTestChildren(result, position: position) || hitTestSelf(position)) {
      result.add(BoxHitTestEntry(this, position));
      return true;
    }
  }
  return false;
}

当这个 RenderBox的位置在这个 position 的范围的时候，会执行 hitTestChildren 方法。这个 hitTestChildren 就是各类组件的 RenderObject自己实现的了。我们来看一个例子，Stack 组件底层的 RenderBox 是一个 RenderStack对象，它的 hittestChildren 会执行 defaultHitTestChildren 方法：

// RenderStack
bool defaultHitTestChildren(BoxHitTestResult result, { required Offset position }) {
  ChildType? child = lastChild;
  while (child != null) {
    final ParentDataType childParentData = child.parentData! as ParentDataType;
    final bool isHit = result.addWithPaintOffset(
      offset: childParentData.offset,
      position: position,
      hitTest: (BoxHitTestResult result, Offset? transformed) {
        return child!.hitTest(result, position: transformed!);
      }
    );
   if (isHit)
      return true;
    child = childParentData.previousSibling;
  }
  return false;
}

这里会把每个子节点都执行一次 hitTest，如果命中了，结束这个方法。如果没有命中，就用子节点的兄弟节点去执行 hitTest，依次遍历执行。这里 Stack 就会有一个和 Android 不一样的地方：当我们在 Stack 最上面一层覆盖一个 Container 的话，那么这个 Container 会命中 hitTest 测试，这里就直接结束了整个 RenderStack 的 hitTest，即使下面一层还有组件可以响应手势，它也不会收到了。

HitTestResult 添加结果最终会把这些 HitTestEntry都添加到自己的 path 里面：

 void add(HitTestEntry entry) {
    assert(entry._transform == null);
    entry._transform = _lastTransform;
    _path.add(entry);
  }

这里也就把手势命中的组件都收集到了一起。这一步完成了，下一步自然就是决定手势具体怎么分发和处理了。

事件分发

当手势的碰撞测试结束后，会继续去分发手势：

void dispatchEvent(PointerEvent event, HitTestResult? hitTestResult) {
  
  if (hitTestResult == null) {
    pointerRouter.route(event);
    return;
  }
  for (final HitTestEntry entry in hitTestResult.path) {
     entry.target.handleEvent(event.transformed(entry.transform), entry);
  }
}

这里简化了一些其他逻辑。当 hitTest 的结果不存在的时候，会执行 pointerRouter 的 route 方法。否则会把 hitTest 收集到的组件都执行一次 handleEvent 方法。

这个过程有点抽象，很难理解具体每一步的目的是什么，我们同样按照一个实际例子来看看具体的流程。这里我们使用我们最常用来处理手势的 GestureDetector：

GestureDetector是一个 Widget，它的层级依次是：

GestureDetector  --->  RawGestureDetector  ---->  Listener ---->  RenderPointerListener

结合上述的 hitTest 过程，path 里面已经存了多个组件。这些组件在 path 列表中，子组件在前，父组件在后。所以这里我们可以认为 path 里存的target的第一个对象是 RenderPointerListener，最后面则是 RenderView和GestureBinding。

事件分发的流程如图：

RenderPointerListener 的 handleEvent 的实现如下：

 // RenderPointerListener
 @override
  void handleEvent(PointerEvent event, HitTestEntry entry) {
    assert(debugHandleEvent(event, entry));
    if (event is PointerDownEvent)
      return onPointerDown?.call(event);
    if (event is PointerMoveEvent)
      return onPointerMove?.call(event);
    if (event is PointerUpEvent)
      return onPointerUp?.call(event);
    if (event is PointerHoverEvent)
      return onPointerHover?.call(event);
    if (event is PointerCancelEvent)
      return onPointerCancel?.call(event);
    if (event is PointerSignalEvent)
      return onPointerSignal?.call(event);
  }

处理向下手势的地方是：

 // RawGestureDetectorState
 void _handlePointerDown(PointerDownEvent event) {
    for (final GestureRecognizer recognizer in _recognizers!.values)
      recognizer.addPointer(event);
  }

这里会由 GestureRecognizer 来执行 addPointer 方法，GestureRecognizer是一个抽象类。它的继承结构如下

image.png

这里调用的则是 OneSequenceGestureRecognizer 的 addPoint，也就是 GestureRecognizer的 addPoint

 // GestureRecognizer
 void addPointer(PointerDownEvent event) {
    _pointerToKind[event.pointer] = event.kind;
    if (isPointerAllowed(event)) {
      addAllowedPointer(event);
    } else {
      handleNonAllowedPointer(event);
    }
  }

执行 addAllowPointer :

// BaseTapGestureRecognizer

@override
void addAllowedPointer(PointerDownEvent event) {
 if (state == GestureRecognizerState.ready) {
  if (_down != null && _up != null) {
   _reset();
  }
  _down = event;
 }
 if (_down != null) {
  super.addAllowedPointer(event);
 }
}

 // PrimaryPointerGestureRecognizer
 @override
  void addAllowedPointer(PointerDownEvent event) {
    startTrackingPointer(event.pointer, event.transform);
    if (state == GestureRecognizerState.ready) {
      state = GestureRecognizerState.possible;
      primaryPointer = event.pointer;
      initialPosition = OffsetPair(local: event.localPosition, global: event.position);
      if (deadline != null)
        _timer = Timer(deadline!, () => didExceedDeadlineWithEvent(event));
    }
  }


 /// OneSequenceGestureRecognizer
 void addAllowedPointer(PointerDownEvent event) {
    startTrackingPointer(event.pointer, event.transform);
  }

 void startTrackingPointer(int pointer, [Matrix4? transform]) {
    GestureBinding.instance!.pointerRouter.addRoute(pointer, handleEvent, transform);
    _trackedPointers.add(pointer);
    assert(!_entries.containsValue(pointer));
    _entries[pointer] = _addPointerToArena(pointer);
  }

这里执行了 GestureBinding#pointerRouter 的 addRoute 方法。把事件添加到了手势路由表和 gestureArena 里。getsureArena代表的则是一个手势竞技场，用来区分哪个手势胜出。

最后走到 GestureBidning 的 handleEvent:

 @override // from HitTestTarget
  void handleEvent(PointerEvent event, HitTestEntry entry) {
    pointerRouter.route(event);
    //....
  }

这里会执行 PointerRouter 的 route 方法：

 void route(PointerEvent event) {
    final Map<PointerRoute, Matrix4?>? routes = _routeMap[event.pointer];
    final Map<PointerRoute, Matrix4?> copiedGlobalRoutes = Map<PointerRoute, Matrix4?>.from(_globalRoutes);
    if (routes != null) {
      _dispatchEventToRoutes(
        event,
        routes,
        Map<PointerRoute, Matrix4?>.from(routes),
      );
    }
    _dispatchEventToRoutes(event, _globalRoutes, copiedGlobalRoutes);
  }

这里会执行 copiedGlobalRoutes 里面的每个方法。如果我们有这个 GestureDetector。就会调用

PrimaryPointerGestureRecognizer 的 handleEvent 方法：

 /// PrimaryPointerGestureRecognizer
 @override
  void handleEvent(PointerEvent event) {
    assert(state != GestureRecognizerState.ready);
    if (state == GestureRecognizerState.possible && event.pointer == primaryPointer) {
      final bool isPreAcceptSlopPastTolerance =
          !_gestureAccepted &&
          preAcceptSlopTolerance != null &&
          _getGlobalDistance(event) > preAcceptSlopTolerance!;
      final bool isPostAcceptSlopPastTolerance =
          _gestureAccepted &&
          postAcceptSlopTolerance != null &&
          _getGlobalDistance(event) > postAcceptSlopTolerance!;

      if (event is PointerMoveEvent && (isPreAcceptSlopPastTolerance || isPostAcceptSlopPastTolerance)) {
        resolve(GestureDisposition.rejected);
        stopTrackingPointer(primaryPointer!);
      } else {
        handlePrimaryPointer(event);
      }
    }
    stopTrackingIfPointerNoLongerDown(event);
  }

这里会判断手势有没有超出设定的范围，如果超出了，不算触发手势。执行 resolve 走 rejected 的流程。否则执行 handlePrimaryPointer 方法。

@override
void handlePrimaryPointer(PointerEvent event) {
   if (event is PointerUpEvent) {
      _up = event;
      _checkUp();
    } else if (event is PointerCancelEvent) {
      resolve(GestureDisposition.rejected);
      if (_sentTapDown) {
        _checkCancel(event, '');
      }
      _reset();
    } else if (event.buttons != _down!.buttons) {
      resolve(GestureDisposition.rejected);
      stopTrackingPointer(primaryPointer!);
    }
}

这里处理了 up 和 cancel 2个手势。down 则没有处理，down 则会交给后续的 target 进行处理，也就是 GestureBinding。分头看看这几个事件：

Up: 调用到 handleTapUp 方法，执行我们传入的 onTapUp。

Cancel: 这里会调 _checkCancel 方法继而调用 handleTapCancel 方法，这里会执行我们传入的 onTapCancel 函数。

Down: 查看 GestureBinding 的处理：

// GestureBinding
@override
void handleEvent(PointerEvent event, HitTestEntry entry) {
  pointerRouter.route(event);
  if (event is PointerDownEvent) {
    gestureArena.close(event.pointer);
  }else if (event is PointerUpEvent) {
    gestureArena.sweep(event.pointer);
  }else if (event is PointerSignalEvent) {
    pointerSignalResolver.resolve(event);
  }
}

// GestureArenaManager
void _tryToResolveArena(int pointer, _GestureArena state) {
  if (state.members.length == 1) {
    scheduleMicrotask(() => _resolveByDefault(pointer, state));
  } else if (state.members.isEmpty) {
    _arenas.remove(pointer);
  }
  //...
}

这里如果是down手势的时候分几种情况处理：

竞技场只有一个成员给这个成员处理
竞技场没有内容不处理
存在竞技场的胜出者，给胜出者处理

如果是up手势，走 sweep 的逻辑：

 void sweep(int pointer) {
   final _GestureArena? state = _arenas[pointer];
   if (state == null)
     return;
   if (state.members.isNotEmpty) {
     state.members.first.acceptGesture(pointer);
     for (int i = 1; i < state.members.length; i++)
       state.members[i].rejectGesture(pointer);
   }
 }

这里直接指定了第一个成员作为竞技场的胜出者。当我们写多个 GestureDetector嵌套的时候，最上层的子节点会最先进入竞技场，所以这个时候只有上面的那个才会响应我们的点击事件。

事件的 accept 和 reject 具体又做了什么呢？这里可以简单的看一下

@override
void acceptGesture(int pointer) {
  super.acceptGesture(pointer);
  if (pointer == primaryPointer) {
    _checkDown();
   _wonArenaForPrimaryPointer = true;
   _checkUp();
  }
}

accept 里面执行了 down -> up

@override
void rejectGesture(int pointer) {
  super.rejectGesture(pointer);
  if (pointer == primaryPointer) {
    if (_sentTapDown) {
     _checkCancel(null, 'forced');
    }
    _reset();
  }
}

如果是 down 手势，先执行 cancel。接着进行重置。这里总结一下上面的流程，事件在分发的过程中会依次遍历让命中的元素进行处理。当 GestureDetector 响应手势的时候，会把自己加入路由表和竞技场。事件从子节点往上传递的过程中会让竞技场里的元素进行竞争。竞争胜出的元素可以处理手势。当手势结束的时候竞技场会进行重新竞争，这时候竞争规则则是第一个元素胜出。