发布网友
发布时间：2024-10-24 00:50
共1个回答
热心网友
时间：2024-11-09 15:58
在探索Flutter 1.20版本下的Hybrid Composition模式时，我们需对比其与旧版本VirtualDisplay的实现差异，深入理解其原理及应用。
在以往的开发中，Android平台上为了集成如WebView、MapView等能力，采用了VirtualDisplays的实现方式。然而，随着1.20版本的更新，官方开始尝试推出类似iOSPlatformView的新模式——Hybrid Composition。本文将通过三部分，对比介绍Hybrid Composition的使用、原理，以及其在1.20版本中的特点和实现方式。
在1.20版本之前，Flutter通过将AndroidView需要渲染的内容绘制到VirtualDisplays中，然后在VirtualDisplay对应的内存中，通过Surface获取渲染数据。VirtualDisplay类似于一个虚拟显示区域，需要与DisplayManager配合调用，通常在副屏显示或录屏场景下使用。它将虚拟显示区域的内容渲染在一个Surface上。
如图所示，简而言之，原生控件的内容被绘制到内存中，Flutter Engine通过相对应的textureId获取控件的渲染数据并显示。然而，这种实现方式存在触摸事件、文字输入和键盘焦点等问题，这些问题在iOS平台上的实现方式有所不同。
1.20版本引入了Hybrid Composition的PlatformView实现，以解决Android平台上的大部分与PlatformView相关的问题，例如华为手机上键盘弹出后Web界面异常消失的情况。实现Hybrid Composition需要使用PlatformViewLink、AndroidViewSurface和PlatformViewsService等对象。开发者需要创建一个dart控制层，并在Android原生层继承PlatformView和PlatformViewFactory。
通过FlutterEngine的getPlatformViewsController注册NativeViewFactory，同时在AndroidManifest.xml中添加代码启用配置。官方表示在Android 10及以上版本，Hybrid Composition性能表现良好，但在10以下版本，Flutter界面在屏幕上的显示速度可能会变慢。
Hybrid Composition的关键在于引入FlutterImageView。它并非一般意义的ImageView，而是一个用于混合原生控件图层合成的原生View。FlutterImageView通过实现RenderSurface接口，实现类似FlutterSurfaceView的部分功能。它内部包含ImageReader、Image和Bitmap等类，用于提供Surface、读取Surface数据并绘制。
FlutterImageView提供了background和overlay两种SurfaceKind，用于在不同场景下显示内容。PlatformViewsController中的createAndroidViewForPlatformView和createVirtualDisplayForPlatformView方法也是Hybrid Composition兼容VirtualDisplay的一种实现方式。
在Dart层，通过PlatformViewsService触发原生的PlatformViewsChannel的create方法，创建PlatformViewCreationRequest并进行usesHybridComposition的判断。如果为true，则调用createAndroidViewForPlatformView方法。
在Hybrid Composition模式下，PlatformView通过某种原生控件显示，我们可以通过布局边界观察到。增加额外的原生控件和Dart层的文本显示在同一区域，发现文本可以显示在原生控件之上，说明Hybrid Composition不仅仅是简单地将原生控件放入Flutter中。
通过Layout Inspector，可以观察到重叠的文本控件通过FlutterImageView层实现渲染。在不同区域显示的多个默认控件共用一个FlutterImageView，而不在同一区域的控件则使用各自的FlutterImageView。使用Hybrid Composition接入的默认PlatformView通常为FlutterMutatorView，用于调整原生控件的位置和Matrix。
Flutter判断控件是否需要使用FlutterImageView基于Engine在SubmitFrame时的处理。它通过current_frame_view_count对每个画面进行规划，触发CreateSurfaceIfNeeded函数，进一步创建FlutterImageView。
在Dart层面，PlatformViewSurface通过PlatformViewRenderBox添加PlatformViewLayer，然后在ui.SceneBuilder中调用Engine添加Layer信息。
当前Hybrid Composition已在1.20 stable版本可用，解决了部分问题。其性能和应用情况将随时间验证。Hybrid Composition的细节丰富，本文未能详尽展开，更多实现细节需进一步探索。
资源推荐：更多关于Hybrid Composition和Flutter开发资源，可参考官方文档、社区教程和论坛讨论。