Flutter PlatformView 在闲鱼直播业务中的实践

背景

闲鱼近期实现了端上直播间的 Flutter 技术重构，验证和拓展了 Flutter 在音视频领域的业务边界。因为直播丰富的玩法和可变的交互，通常我们会在直播间页面覆盖一层互动层，用于处理和展示业务互动行为。这一互动层，通常是由 H5/Weex 等技术来实现的，以满足动态性和业务投放的需求。因为其背后有着一整套配套的解决方案和能力，显然在 Flutter 场景下，复用或移植成熟的 Native 能力是比较好的解决方案，PlatformView 是最适合用于实现该组件的技术，这也是我们采用的方案。

什么是 PlatformView？

PlatformView 技术是 Flutter 提供的一种能够将 Native 组件嵌入到 Flutter 页面中的能力，有了这种能力，一些 Native 上非常成熟的功能组件，例如地图、广告页面、WebView 就可以很方便地和 Flutter 结合，在 Flutter 页面上展示。

实现技术上，iOS 中，PlatformView 的 Native View 会被加入到 Flutter 的 UI 视图层级中，这种方式称之为 Hybrid Composition；而 Android 支持使用 VirtualDisplay 和 Hybrid Composition 两种模式，前者将 Native View 绘制到内存中，然后和 Flutter Widget 一起渲染到 Flutter 页面中，后者和 iOS 上类似。闲鱼目前在 Android 中使用的是 VirtualDisplay 这种模式。

直播间互动层组件

互动层是一个覆盖整个直播间的组件，隶属于某一特定的直播间，可以跟随该直播间上下翻页滑动，一般情况下处于直播间 View 层级的最上层，这样才能做到可以在直播间任意位置布局任意的元素并展示。它是一个背景透明的组件，当用户点击互动层上的元素时，由互动层来进行响应交互，而当用户点击透明区域时，事件会穿透互动层，由下面层级上最合适的组件来进行响应，不影响正常的直播间功能。这就要求我们对该组件的事件分发进行一些处理。这里主要的处理方案是，获取用户的点击位置坐标点，判断组件该像素点的透明度，根据一定的阈值来区分究竟是该由谁来响应。以 iOS 为例，我们知道 iOS 的事件响应分为两个阶段：第一阶段用于寻找最佳响应者，即在 View Tree 上不断调用 hitTest 和 pointInside 方法进行检测，第二阶段才是真正响应事件。所以对于 iOS 实现来说 ，我们只要干预第一阶段，重写该互动层 View 的 pointInside 方法增加上我们的透明度判断逻辑，就可以实现。Android 也是进行类似的处理。

PlatformView 互动层的事件分发问题

虽然通过 PlatformView 可以很方便地嵌入互动