在 Flutter 里混合原生平台的控件需要通过 PlatformView
进行接入实现,在这方面 iOS 的实现方式一直变化不大,但是在 Android 上不同版本到目前就出现了三种实现逻辑,所以本篇主要介绍 Android 平台如何选择合适的 PlatformView
方案。
抛开最早期如 flutter_webview_plugin 这种直接进行覆盖原生控件的实现不谈, PlatformView
在 Android 上目前官方提供的就有三种实现方式:
VirtualDisplays
:类似于一个虚拟显示区域,将虚拟显示区域的内容渲染在一个内存Surface
上,然后同步纹理到 Engine ,事实上控件并不在渲染位置。
HybridComposition
: 通过addView
直接添加原生平台控件,需要层级覆盖时利用FlutterImageView
承载 Flutter 控件的渲染进行堆叠,原生控件会在渲染位置。
TextureLayer
:在渲染位置通过原生的透明PlatformViewWrapper
做容器,然后通过替换 Canvas 将原生控件的纹理渲染到特定 Surface 上,控件不在渲染位置,但是可以通过父容器做事件拦截。
是不是看完有点懵?不怕后面会有对应的例子解释,不理解也不要紧,这一篇是教你如何选,所以也并不需要真的理解内部是如何实现。
但是上面介绍的这三种实现也是有前提条件的,比如:
- Flutter 1.2 之前,你只能用
VirtualDisplays
- Flutter 3.0 之前,你只能用
VirtualDisplays
和HybridComposition
- Flutter 3.3 之前,你只能用
TextureLayer
和HybridComposition
- Flutter 3.3 开始,你能用
VirtualDisplays
、TextureLayer
和HybridComposition
是不是觉得有些奇怪,为什么会有奇怪的排列方式?这里面的故事线大概是这样的:
- 因为
VirtualDisplays
存在触摸事件和键盘等问题,所以通过addView
进行原生堆叠的HybridComposition
出现,解决了手势和键盘等问题 - 因为
HybridComposition
存在一些场景缺陷,比如列表卡顿,渲染线程不同步导致闪动等问题,所以VirtualDisplays