Flutter 混合栈（Hybrid Composition）：PlatformView 在 Android 上的图层合成与触控转发 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，下面开始我的讲座：

Flutter 混合栈：PlatformView 在 Android 上的图层合成与触控转发

大家好，今天我们要深入探讨 Flutter 混合栈中一个至关重要的部分：PlatformView 在 Android 平台上的图层合成和触控转发机制。理解这些机制对于构建高性能、流畅且与原生平台无缝集成的 Flutter 应用至关重要。

什么是 Flutter 混合栈？

Flutter 混合栈指的是 Flutter 应用中同时存在 Flutter UI 和原生 UI（通常是 Android View 或 iOS UIView）的场景。这种模式在需要使用 Flutter 无法直接提供的原生功能，或者需要集成已有的原生组件时非常常见。

PlatformView 是 Flutter 提供的一种机制，用于将原生 View 嵌入到 Flutter 的 Widget 树中。它本质上是一个桥梁，允许原生 View 在 Flutter 的渲染管道中占有一席之地。

PlatformView 的图层合成

在 Flutter 应用中，所有的 Widget 最终都会被渲染成纹理并合成到屏幕上。当引入 PlatformView 时，事情会变得稍微复杂一些。我们需要理解 Android 平台的图层合成机制，以及 Flutter 如何与它交互。

Android 图层合成基础

在 Android 中，View 的渲染可以分为软件渲染和硬件加速渲染两种模式。硬件加速渲染利用 GPU 来进行渲染，通常性能更好。 Android 的 View hierarchy 会被转换成一个渲染树，每个 View 对应一个 RenderNode。RenderNode 包含了 View 的绘制信息，例如变换、裁剪、透明度等。

在合成阶段，Android 的 SurfaceFlinger 组件会将多个 Surface 上的内容合成到屏幕上。每个 Surface 可以理解为一个独立的绘制区域，它可以包含一个或多个 RenderNode。

PlatformView 的渲染流程

当 Flutter 应用包含 PlatformView 时，渲染流程大致如下：

Flutter Engine 渲染 Flutter UI: Flutter Engine 负责渲染 Flutter 的 Widget 树，并将结果输出到一个或多个 Surface 上。
PlatformView 创建原生 View: PlatformView 会创建一个对应的原生 View（例如，一个 Android TextView）。
原生 View 渲染自身: 原生 View 利用 Android 的渲染机制，将内容绘制到自己的 Surface 上。
SurfaceFlinger 合成: SurfaceFlinger 将 Flutter Engine 的 Surface 和 PlatformView 的 Surface 合成到屏幕上。

关键点：Surface 的使用

PlatformView 的核心在于它拥有自己的 Surface。这个 Surface 是原生 View 绘制内容的地方。 Flutter 通过 PlatformView 的插件机制，能够获取到这个 Surface 的句柄，并将它传递给 Flutter Engine。

Flutter Engine 会将这个 Surface 作为一个特殊的纹理来处理，并在渲染 Flutter UI 时将它合成到正确的位置。

代码示例：PlatformView 的创建与渲染

下面是一个简单的 PlatformView 的示例，它在 Flutter 应用中嵌入一个 Android TextView：

Flutter 端 (main.dart):

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlatformView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('PlatformView Demo'),
        ),
        body: Column(
          children: [
            Text('Flutter UI above PlatformView'),
            SizedBox(
              height: 200,
              width: double.infinity,
              child: AndroidView(
                viewType: 'platform_text_view',
                creationParams: <String, dynamic>{
                  'text': 'Hello from Android TextView!',
                },
                creationParamsCodec: const StandardMessageCodec(),
              ),
            ),
            Text('Flutter UI below PlatformView'),
          ],
        ),
      ),
    );
  }
}

Android 端 (Kotlin):

import android.content.Context
import android.view.View
import android.widget.TextView
import io.flutter.plugin.common.BinaryMessenger
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

class PlatformTextViewFactory(private val messenger: BinaryMessenger) : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context?, viewId: Int, args: Any?): PlatformView {
        val creationParams = args as? Map<String, Any>
        return PlatformTextView(context!!, messenger, viewId, creationParams)
    }
}

class PlatformTextView(context: Context, messenger: BinaryMessenger, id: Int, creationParams: Map<String, Any>?) : PlatformView {
    private val textView: TextView = TextView(context)

    init {
        val text = creationParams?.get("text") as? String ?: "Default Text"
        textView.text = text
    }

    override fun getView(): View {
        return textView
    }

    override fun dispose() {}
}

Android 端 (Kotlin) – 注册 PlatformViewFactory:

在你的 FlutterPlugin 的 onAttachedToEngine 方法中注册 PlatformViewFactory:

import io.flutter.embedding.engine.plugins.FlutterPlugin

class MyFlutterPlugin : FlutterPlugin {
    override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        binding.platformViewRegistry.registerViewFactory(
            "platform_text_view",
            PlatformTextViewFactory(binding.binaryMessenger)
        )
    }

    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        // Cleanup if needed
    }
}

代码解释：

Flutter 端: 使用 AndroidView Widget 来嵌入 PlatformView。 viewType 必须与 Android 端注册的 PlatformViewFactory 的标识符匹配。 creationParams 用于向 Android 端传递参数，例如 TextView 的文本内容。
Android 端: PlatformViewFactory 负责创建 PlatformView 的实例。 PlatformTextView 是一个自定义的 PlatformView，它包含一个 Android TextView。在 PlatformTextView 的构造函数中，我们接收来自 Flutter 端的参数并设置 TextView 的文本。 getView() 方法返回底层的 Android View。

图层合成的挑战

虽然 PlatformView 提供了强大的原生集成能力，但也带来了一些图层合成方面的挑战：

性能开销: PlatformView 的渲染涉及到跨进程通信（Flutter Engine 和 Android 系统服务），以及 Surface 的合成，这会带来一定的性能开销。
Z-Order 问题: PlatformView 的 Z-Order （在屏幕上的层叠顺序）可能与 Flutter Widget 的 Z-Order 不一致，导致 PlatformView 遮挡 Flutter UI，或者反过来。
透明度问题: PlatformView 的透明度处理可能与 Flutter Widget 不同，导致视觉上的不一致。

为了解决这些问题，Flutter 提供了不同的 PlatformView 的渲染模式，以及一些优化技巧。

PlatformView 渲染模式

Flutter 提供了两种主要的 PlatformView 渲染模式：

VirtualDisplay 模式 (默认): 在这种模式下，PlatformView 的内容被渲染到一个 VirtualDisplay 上，然后通过 Texture 传递给 Flutter Engine。 VirtualDisplay 模拟了一个物理屏幕，PlatformView 可以在上面进行渲染。
TextureLayer 模式: 在这种模式下，PlatformView 的内容被直接渲染到一个 TextureLayer 上，然后传递给 Flutter Engine。 TextureLayer 是 Android 系统提供的一种硬件加速的渲染机制。

模式选择的考量

VirtualDisplay 模式: 兼容性更好，支持更多的 Android 设备和版本。但是，性能相对较低，尤其是在处理复杂的 UI 时。
TextureLayer 模式: 性能更高，尤其是在处理动画和透明度时。但是，兼容性可能受到限制，某些设备或版本可能不支持。

可以通过在创建 AndroidView 时设置 hitTestBehavior 属性来控制 PlatformView 的渲染模式。默认情况下，Flutter 会尝试使用 TextureLayer 模式，如果不支持则回退到 VirtualDisplay 模式。

Z-Order 管理

为了解决 Z-Order 问题，可以使用 Stack Widget 来控制 Flutter Widget 和 PlatformView 的层叠顺序。确保 PlatformView 在 Stack 中的位置正确，以避免遮挡或被遮挡。

透明度处理

为了解决透明度问题，可以尝试以下方法：

确保 PlatformView 的背景色是透明的。
使用 Opacity Widget 来控制 PlatformView 的透明度。
如果使用 TextureLayer 模式，可以尝试启用硬件加速渲染。

PlatformView 的触控转发

PlatformView 的另一个关键方面是触控事件的转发。当用户触摸 PlatformView 时，Flutter 需要将触控事件传递给底层的原生 View，以便原生 View 可以处理这些事件。

触控转发机制

Flutter 的触控转发机制大致如下：

用户触摸屏幕: Android 系统接收到触控事件。
Flutter Engine 接收事件: Android 系统将触控事件传递给 Flutter Engine。
Flutter Engine 判断是否命中 PlatformView: Flutter Engine 遍历 Widget 树，判断触控事件是否发生在 PlatformView 的区域内。
转发事件给原生 View: 如果触控事件命中 PlatformView，Flutter Engine 将事件转发给底层的原生 View。
原生 View 处理事件: 原生 View 接收到触控事件，并进行相应的处理，例如滚动、点击等。

关键点：Hit Testing

Hit Testing 是触控转发的核心。 Flutter Engine 需要准确地判断触控事件是否发生在 PlatformView 的区域内。这涉及到坐标转换、裁剪和 Z-Order 的计算。

代码示例：触控事件的处理

在 Android 端的 PlatformView 中，可以通过重写 onTouchEvent 方法来处理触控事件：

class PlatformTextView(context: Context, messenger: BinaryMessenger, id: Int, creationParams: Map<String, Any>?) : PlatformView {
    private val textView: TextView = TextView(context)

    init {
        val text = creationParams?.get("text") as? String ?: "Default Text"
        textView.text = text

        textView.setOnTouchListener { v, event ->
            // Process touch event here
            println("TextView touched! Action: ${event.action}")
            true // Consume the event
        }
    }

    override fun getView(): View {
        return textView
    }

    override fun dispose() {}
}

代码解释：

在 PlatformTextView 的 init 代码块中，我们设置了一个 OnTouchListener 来监听 TextView 的触控事件。
在 onTouchEvent 方法中，我们可以获取到触控事件的信息，例如 Action (ACTION_DOWN, ACTION_MOVE, ACTION_UP 等)，并进行相应的处理。

触控转发的挑战

触控转发也面临一些挑战：

事件冲突: 如果 Flutter UI 和 PlatformView 都需要处理触控事件，可能会发生事件冲突。
手势识别: 在 PlatformView 中实现复杂的手势识别可能比较困难，因为 Flutter 的手势识别器无法直接作用于原生 View。
事件传递链: 触控事件的传递链可能比较长，涉及到跨进程通信，可能会带来延迟。

解决事件冲突

为了解决事件冲突，可以使用 AbsorbPointer Widget 来阻止 Flutter UI 接收触控事件。当 PlatformView 需要独占触控事件时，可以使用 AbsorbPointer 将 PlatformView 包裹起来。

手势识别

为了在 PlatformView 中实现复杂的手势识别，可以考虑以下方法：

使用原生手势识别器: 在 Android 端使用原生的手势识别器（例如，GestureDetector）来处理手势。
通过 MethodChannel 与 Flutter 通信: 将原生手势识别的结果通过 MethodChannel 传递给 Flutter 端，然后在 Flutter 端进行相应的处理。

优化事件传递链

为了优化事件传递链，可以尝试以下方法：

减少跨进程通信的次数。
使用更高效的通信机制（例如，共享内存）。
避免在触控事件处理函数中执行耗时的操作。

总结，优化混合栈体验

PlatformView 是 Flutter 混合栈中不可或缺的一部分，它允许 Flutter 应用集成原生 View，从而扩展 Flutter 的功能和灵活性。理解 PlatformView 的图层合成和触控转发机制对于构建高性能、流畅且与原生平台无缝集成的 Flutter 应用至关重要。通过选择合适的渲染模式，管理 Z-Order，处理透明度，以及优化触控转发，可以最大限度地提升混合栈应用的体验。

灵活运用，构建强大应用

掌握 PlatformView 的图层合成和触控转发机制，可以帮助我们构建更加强大和灵活的 Flutter 应用，充分利用原生平台的优势，实现更丰富的功能和更好的用户体验。