盐析白兔

这个屌丝很懒，什么也没留下！

热门标签

Flutter之Hybird-composition View的事件分发流程_flutter androidviewsurface

作者：盐析白兔 | 2024-04-15 03:57:35

踩

flutter androidviewsurface

前言

最近研究混合栈渲染时，遇到了一个混合栈下的事件分发问题，为此看了一下flutter接入原生view后，其中的事件分发流程。为了方便后期查阅，做此记录，也希望能帮到有需要的人。

文中所讨论的原生view为： AndroidViewSurface ，即：hybird composition ，其次还将涉及到Flutter的启动流程 ,如果对这两者不熟悉的话，建议浏览这下面的文章：

Flutter——在Android平台上的启动流程浅析

Flutter在Android平台上启动时，Native层做了什么？

Flutter——Hybrid Composition混合图层的原理分析

平台层: Android

由启动流程可知，最先创建的 FlutterView类似于容器，其持有flutter绘制所需的surface，那么我们就由它的onTouchEvent方法看起。

其实，根据Flutter框架的定位，也可以猜到事件分发是由平台负责的。
1

Flutter:onTouchEvent

@Override
public boolean onTouchEvent(@NonNull MotionEvent event) {
  ...无关代码...

  return androidTouchProcessor.onTouchEvent(event);
}
1
2
3
4
5
6

这里调用了 androidTouchProcessor.onTouchEvent(event)。

AndroidTouchProcessor: onTouchEvent

public boolean onTouchEvent(@NonNull MotionEvent event) {
  return onTouchEvent(event, IDENTITY_TRANSFORM);
}
1
2
3

此方法会进一步调用同名函数:

public boolean onTouchEvent(@NonNull MotionEvent event, Matrix transformMatrix) {
  int pointerCount = event.getPointerCount();

  // Prepare a data packet of the appropriate size and order.
  // 对event进行转换和存储，并传递给flutter侧
  ByteBuffer packet =
      ByteBuffer.allocateDirect(pointerCount * POINTER_DATA_FIELD_COUNT * BYTES_PER_FIELD);
  packet.order(ByteOrder.LITTLE_ENDIAN);
    
    //...省略不少代码...
    //主要是根据event类型，并通过addPointerForIndex(...)方法对packet进行数据填充

  // 将packet发送到flutter
  renderer.dispatchPointerDataPacket(packet, packet.position());

  return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

最终调用 FlutterRenderer.dispatchPointerDataPacket 进行事件的传递，我们继续看。

dispatchPointerDataPacket

这里相对比较简单，renderer的 dispatchPointerDataPacket 方法直接调用了FlutterJni的dispatchPointerDataPacket方法：

//FlutterRenderer
public void dispatchPointerDataPacket(@NonNull ByteBuffer buffer, int position) {
  flutterJNI.dispatchPointerDataPacket(buffer, position);
}

//FlutterJNI

/** 这里会将pointer packet 转到对应的engine层的方法:nativeDispatchPointerDataPacket*/
@UiThread
public void dispatchPointerDataPacket(@NonNull ByteBuffer buffer, int position) {
  ensureRunningOnMainThread();
  ensureAttachedToNative();
  //调用engine层的方法
  nativeDispatchPointerDataPacket(nativeShellHolderId, buffer, position);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

平台层的事件分发还是比较简单明了的，我们跟着事件继续往下走。

中间层: Engine

Platform Thread

通过开头的Flutter在Android平台上启动时，Native层做了什么？，我们知道应用开始会注册一些engine的方法，具体实现在platform_view_android_jni_impl.cc :

bool RegisterApi(JNIEnv* env) {
  static const JNINativeMethod flutter_jni_methods[] = { 
    //...省略部分注册的方法
    {
        .name = "nativeDispatchPointerDataPacket", //android 侧的方法名
        .signature = "(JLjava/nio/ByteBuffer;I)V",//android 方法名的签名（参数类型）
        .fnPtr = reinterpret_cast<void*>(&DispatchPointerDataPacket),//对应engine层的方法指针
    },
    //...省略部分注册的方法
  }
1
2
3
4
5
6
7
8
9
10

当我们在android侧调用nativeDispatchPointerDataPacket方法时，会调用engine的DispatchPointerDataPacket方法，其实现如下：

static void DispatchPointerDataPacket(JNIEnv* env,
                                      jobject jcaller,
                                      jlong shell_holder,
                                      jobject buffer,
                                      jint position) {
                                      
  //通过GetDirectBufferAddress 获取到指向buffer的指针
  uint8_t* data = static_cast<uint8_t*>(env->GetDirectBufferAddress(buffer));
  
  //在通过position 最终生成一个指向packet的指针
  auto packet = std::make_unique<flutter::PointerDataPacket>(data, position);
  
  //然后将packet传递到 platform view的DispatchPointerDataPacket方法中
  ANDROID_SHELL_HOLDER->GetPlatformView()->DispatchPointerDataPacket(
      std::move(packet));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

android端的packet通过上面的方法，传递到了platform view的DispatchPointerDataPacket 方法。

//这里 holder 返回了一个PlatformView的子类PlatformViewAndroid
fml::WeakPtr<PlatformViewAndroid> AndroidShellHolder::GetPlatformView() {
  FML_DCHECK(platform_view_);
  return platform_view_;
}
1
2
3
4
5

虽然返回的是 PlatformViewAndroid，但是父类PlatformViewAndroid的 DispatchPointerDataPacket方法并没有要求子类重写，且PlatformViewAndroid内也确实没有重写这个方法，那么我们直接看其父类的实现:

void PlatformView::DispatchPointerDataPacket(
    std::unique_ptr<PointerDataPacket> packet) {
  delegate_.OnPlatformViewDispatchPointerDataPacket(
      pointer_data_packet_converter_.Convert(std::move(packet)));
}
1
2
3
4
5

此处的delegate_ 为PlatformView内部的一个抽象类，在AttachJNI方法初始化AndroidShellHolder中，其内部对AndroidPlatformView初始化时而实例化的，这里简单介绍一下：

AttachJNI / AndroidShellHolder等 可以参见上面的文章
1

AndroidShellHolder::AndroidShellHolder(
    flutter::Settings settings,
    std::shared_ptr<PlatformViewAndroidJNI> jni_facade,
    bool is_background_view)
    : settings_(std::move(settings)), jni_facade_(jni_facade) {
    
    ...省略部分代码
    
    //初始化shell时，传入此回调
  Shell::CreateCallback<PlatformView> on_create_platform_view =
      [is_background_view, &jni_facade, &weak_platform_view](Shell& shell) {
        std::unique_ptr<PlatformViewAndroid> platform_view_android;
        
        //这里通过回调，我们将shell作为delegate传入PlatformViewAndroid
        
        platform_view_android = std::make_unique<PlatformViewAndroid>(
            shell,                   // delegate
            shell.GetTaskRunners(),  // task runners
            jni_facade,              // JNI interop
            shell.GetSettings()
                .enable_software_rendering,  // use software rendering
            !is_background_view              // create onscreen surface
        );
        weak_platform_view = platform_view_android->GetWeakPtr();
        auto display = Display(jni_facade->GetDisplayRefreshRate());
        shell.OnDisplayUpdates(DisplayUpdateType::kStartup, {display});
        return platform_view_android;
      };

       ...省略部分代码
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

ok，通过上面这一段代码，我们知道delegate实例是怎么来的了，接下来回到正题，继续看PlatformView::DispatchPointerDataPacket:

void PlatformView::DispatchPointerDataPacket(
    std::unique_ptr<PointerDataPacket> packet) {
  delegate_.OnPlatformViewDispatchPointerDataPacket(
      pointer_data_packet_converter_.Convert(std::move(packet)));
}
1
2
3
4
5

其又调用了Shell的OnPlatformViewDispatchPointerDataPacket方法：

void Shell::OnPlatformViewDispatchPointerDataPacket(
    std::unique_ptr<PointerDataPacket> packet) {
    
  ...省略部分代码
  
  //这里做了个线程切换，向UI Thread 添加了一个任务，
  //并最终执行engine的DispatchPointerDataPacket方法
  //注： 这里的UI thread就是flutter 代码执行的线程
  task_runners_.GetUITaskRunner()->PostTask(
  
      //shell为engine的子类，并持有了engine的一个弱引用weak_engine_
      
      fml::MakeCopyable([engine = weak_engine_, packet = std::move(packet),
                         flow_id = next_pointer_flow_id_]() mutable {
        if (engine) {
          engine->DispatchPointerDataPacket(std::move(packet), flow_id);
        }
      }));
  next_pointer_flow_id_++;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

UI Thread

engine->DispatchPointerDataPacket 的这个方法有点绕，其实现如下：

void Engine::DispatchPointerDataPacket(
    std::unique_ptr<PointerDataPacket> packet,
    uint64_t trace_flow_id) {
  ...
  pointer_data_dispatcher_->DispatchPacket(std::move(packet), trace_flow_id);
}
1
2
3
4
5
6

看起来它又调用了dispatcher，但最终还是调用的engine实现的接口方法DoDispatchPacket :

void Engine::DoDispatchPacket(std::unique_ptr<PointerDataPacket> packet,
                              uint64_t trace_flow_id) {
  animator_->EnqueueTraceFlowId(trace_flow_id);
  if (runtime_controller_) {
    runtime_controller_->DispatchPointerDataPacket(*packet);
  }
}
1
2
3
4
5
6
7

进入RuntimeController::DispatchPointerDataPacket

bool RuntimeController::DispatchPointerDataPacket(
    const PointerDataPacket& packet) {
  if (auto* platform_configuration = GetPlatformConfigurationIfAvailable()) {
    ...other code
    
    //这里获取到了id为0的window并调用了DispatchPointerDataPacket
    platform_configuration->get_window(0)->DispatchPointerDataPacket(packet);
    return true;
  }

  return false;
}
1
2
3
4
5
6
7
8
9
10
11
12

这个window，如果你看过关于flutter源码介绍之类的文章(如：渲染流程),应该是不会陌生的，这个window就是与flutter端的window相对应的。

void Window::DispatchPointerDataPacket(const PointerDataPacket& packet) {
  std::shared_ptr<tonic::DartState> dart_state = library_.dart_state().lock();
  if (!dart_state) {
    return;
  }
  tonic::DartState::Scope scope(dart_state);
    
    //这里对咱们从android端挪过来的packet 做了个转换
  const std::vector<uint8_t>& buffer = packet.data();
  Dart_Handle data_handle =
      tonic::DartByteData::Create(buffer.data(), buffer.size());
  if (Dart_IsError(data_handle)) {
    return;
  }
  
  //类似jni的调用，拉起了flutter端的 "_dispatchPointerDataPacket"方法
  tonic::LogIfError(tonic::DartInvokeField(
      library_.value(), "_dispatchPointerDataPacket", {data_handle}));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

接下来就要转到flutter侧了。

Flutter层

如果你对WidgetsFlutterBinding及其混入类不熟悉，可以取查阅flutter的相关文章，有很多。
1

我们单刀直入GestureBinding类，可以看到初始化方法：

@override
void initInstances() {
  super.initInstances();
  _instance = this;
  window.onPointerDataPacket = _handlePointerDataPacket;
}
1
2
3
4
5
6

window.onPointerDataPacket

我们先看window.onPointerDataPacke

set onPointerDataPacket(PointerDataPacketCallback? callback) {
  platformDispatcher.onPointerDataPacket = callback;
}
1
2
3

platformDispatcher的方法：

PointerDataPacketCallback? get onPointerDataPacket => _onPointerDataPacket;
PointerDataPacketCallback? _onPointerDataPacket;
Zone _onPointerDataPacketZone = Zone.root;
set onPointerDataPacket(PointerDataPacketCallback? callback) {
  _onPointerDataPacket = callback;
  _onPointerDataPacketZone = Zone.current;
}
1
2
3
4
5
6
7

最终会将_handlePointerDataPacket方法赋值给platformDispatcher的_onPointerDataPacket，而_onPointerDataPacket 则会在下面这个方法中调用:

// Called from the engine, via hooks.dart
void _dispatchPointerDataPacket(ByteData packet) {
  if (onPointerDataPacket != null) {
    _invoke1<PointerDataPacket>(
      onPointerDataPacket,
      _onPointerDataPacketZone,
      _unpackPointerDataPacket(packet),
    );
  }
}
1
2
3
4
5
6
7
8
9
10

从上面的注释可以看到，这里的方法最终与咱们在engine层中的调用链关联了起来，即被下面这个方法所调用的：

  tonic::LogIfError(tonic::DartInvokeField(
      library_.value(), "_dispatchPointerDataPacket", {data_handle}));
1
2

当然，关联节点是在hooks.dart文件中做的。

@pragma('vm:entry-point')
// ignore: unused_element
void _dispatchPointerDataPacket(ByteData packet) {
  PlatformDispatcher.instance._dispatchPointerDataPacket(packet);
}
1
2
3
4
5

接下来看_handlePointerDataPacket

_handlePointerDataPacket

此方法会绑定到window并用于响应engine的回调，

void _handlePointerDataPacket(ui.PointerDataPacket packet) {
  // We convert pointer data to logical pixels so that e.g. the touch slop can be
  // defined in a device-independent manner.
  _pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, window.devicePixelRatio));
  if (!locked)
    _flushPointerEventQueue();
}
1
2
3
4
5
6
7

本文旨在分析原生view的事件分发流程,为了避免跑题和压缩篇幅，flutter侧事件分发将会简要概括。

而其内部经过相对简单的调用链最终会进入下面这个方法：

void _handlePointerEventImmediately(PointerEvent event) {
    
    // 第一步
  HitTestResult? hitTestResult;
  if (event is PointerDownEvent || event is PointerSignalEvent || event is PointerHoverEvent) {
    assert(!_hitTests.containsKey(event.pointer));
    hitTestResult = HitTestResult();
    hitTest(hitTestResult, event.position);
    if (event is PointerDownEvent) {
      _hitTests[event.pointer] = hitTestResult;
    }
    assert(() {
      if (debugPrintHitTestResults)
        debugPrint('$event: $hitTestResult');
      return true;
    }());
  } else if (event is PointerUpEvent || event is PointerCancelEvent) {
    hitTestResult = _hitTests.remove(event.pointer);
  } else if (event.down) {
    // Because events that occur with the pointer down (like
    // [PointerMoveEvent]s) should be dispatched to the same place that their
    // initial PointerDownEvent was, we want to re-use the path we found when
    // the pointer went down, rather than do hit detection each time we get
    // such an event.
    hitTestResult = _hitTests[event.pointer];
  }
  assert(() {
    if (debugPrintMouseHoverEvents && event is PointerHoverEvent)
      debugPrint('$event');
    return true;
  }());
  if (hitTestResult != null ||
      event is PointerAddedEvent ||
      event is PointerRemovedEvent) {
    assert(event.position != null);
    
    // 第二步
    dispatchEvent(event, hitTestResult);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

这个方法可以大致分为两步，在此做一个简要概括：

第一步：

创建一个root hitTestResult,其内部拥有一个List类型的_path,随后调用rootView的hitTest方法并进而调用其child的hitTest方法，依次向下一直遍历整个render树。

这个过程中`root hitTestResult`会被一直传递
1

每当遍历到一个节点render，便会根据自身的_size是否包含pointer event positon来确定是否加入到_path中。

第二步：

调用dispatchEvent方法，该方法会遍历_path中的节点，并调用handleEvent方法:

for (final HitTestEntry entry in hitTestResult.path) {
  try {
    //target 为renderObject，其实现了HitTestTarget接口
    entry.target.handleEvent(event.transformed(entry.transform), entry);
  } catch (exception, stack) {
    ...other code
  }
}
1
2
3
4
5
6
7
8

经过上面这部分，我们大致了解了flutter的事件分发。现在回归正题，来看一下AndroidViewSurface是如何处理事件的。

AndroidViewSurface

关于混合图层的创建即实现原理请参考这篇文章:Flutter——Hybrid Composition混合图层的原理分析。

AndroidViewSurface 继承自PlatformViewSurface,它内部的一个重要方法是：

//创建一个render object，自定义过widget的朋友应该不陌生这个方法

@override
RenderObject createRenderObject(BuildContext context) {
  return PlatformViewRenderBox(controller: controller, 
      gestureRecognizers: gestureRecognizers, hitTestBehavior: hitTestBehavior);
}
1
2
3
4
5
6
7

我们继续往下走，PlatformViewRenderBox :

//看到它的父类，再结合之前的内容，应该就是这里了
class PlatformViewRenderBox extends RenderBox with _PlatformViewGestureMixin{

    PlatformViewRenderBox({
      required PlatformViewController controller,
      required PlatformViewHitTestBehavior hitTestBehavior,
      required Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers,
    }) :  assert(controller != null && controller.viewId != null && controller.viewId > -1),
          assert(hitTestBehavior != null),
          assert(gestureRecognizers != null),
          
          //这个controller 也很重要
          _controller = controller {
      this.hitTestBehavior = hitTestBehavior;
      
      //这里更新了手势识别器
      updateGestureRecognizers(gestureRecognizers);
    }
    
    ...non-relative code

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这里可以看到，dispatchPointerEvent这个方法是从_controller(AndroidViewController)中取到的。

void updateGestureRecognizers(Set<Factory<OneSequenceGestureRecognizer>> gestureRecognizers) {
  _updateGestureRecognizersWithCallBack(gestureRecognizers, _controller.dispatchPointerEvent);
}
1
2
3

我们来看一下_controller.dispatchPointerEvent的实现：

@override
Future<void> dispatchPointerEvent(PointerEvent event) async {
  if (event is PointerHoverEvent) {
    return;
  }

  if (event is PointerDownEvent) {
    _motionEventConverter.handlePointerDownEvent(event);
  }

  _motionEventConverter.updatePointerPositions(event);

    //将flutter 事件 转成 android 事件
    
  final AndroidMotionEvent? androidEvent =
      _motionEventConverter.toAndroidMotionEvent(event);

  if (event is PointerUpEvent) {
    _motionEventConverter.handlePointerUpEvent(event);
  } else if (event is PointerCancelEvent) {
    _motionEventConverter.handlePointerCancelEvent(event);
  }

  if (androidEvent != null) {
    //发送转换后的事件
    await sendMotionEvent(androidEvent);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

跟着进入sendMotionEvent(androidEvent)方法:

Future<void> sendMotionEvent(AndroidMotionEvent event) async {
  await SystemChannels.platform_views.invokeMethod<dynamic>(
    'touch',
    event._asList(viewId),
  );
}
1
2
3
4
5
6

(○´･д･)ﾉ，这里又将点击事件传回了Android端…后面就不再赘述了，这个事件最终会被对应的原生view进行消费。

结语

刚看到这里时我是比较纳闷的，觉得事件绕了很大一圈，不过转念一想Flutter作为上层主要消费区，如果被跳过很可能造成事件错发的问题。

但是，我还是疑惑，混合图层下的事件消费问题是否可以在engine层做个优化呢？毕竟混合图层的渲染就是在engine做了优化。

至此，要梳理的流程业已完毕，谢谢大家的阅读，如有错误欢迎指出。

其他Flutter相关文章

Flutter 仿网易云音乐App

Flutter&Android 启动页（闪屏页）的加载流程和优化方案

Flutter版仿.知乎列表的视差效果

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

Flutter 仿同花顺自选股列表

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】