Platform View 的手势穿透：如何将 Flutter 手势传递给底层的原生 View

Platform View 的手势穿透：如何将 Flutter 手势传递给底层的原生 View

大家好，今天我们来深入探讨一个在 Flutter 开发中经常遇到的问题：Platform View 的手势穿透。Platform View 允许我们将原生平台的 UI 组件嵌入到 Flutter 应用中，从而利用原生平台特定的功能或现有的 UI 组件。然而，在某些情况下，我们希望 Flutter 的手势能够穿透 Platform View，直接与底层的原生 View 交互。这涉及到 Flutter 的手势处理机制与原生 View 的事件响应机制的协调，其中存在一些需要仔细处理的细节。

什么是 Platform View？

Platform View 本质上是一个 Flutter Widget，它在 Flutter 的 Widget 树中占据一个位置，但其渲染和事件处理由原生平台负责。Flutter 通过特定的消息通道与原生平台进行通信，以控制 Platform View 的行为和获取其状态。

使用 Platform View 的常见场景包括：

• 集成原生地图控件：利用原生地图 SDK 提供的丰富功能，例如离线地图、复杂的标注等。
• 嵌入原生视频播放器：直接使用原生平台的视频解码能力，获得更好的性能和兼容性。
• 使用原生广告 SDK：接入原生广告平台，实现广告展示和收益。
• 复用现有的原生 UI 组件：避免在 Flutter 中重新实现复杂的原生 UI 组件，节省开发时间和成本。

为什么需要手势穿透？

默认情况下，Platform View 会拦截 Flutter 的手势事件。这意味着，当用户在 Platform View 上进行触摸操作时，Flutter 的手势识别器不会收到这些事件，因此 Flutter 的手势处理逻辑无法执行。

在以下情况下，我们可能需要手势穿透：

• 在 Platform View 上叠加 Flutter Widget：例如，在地图上叠加自定义的 Flutter UI，并希望用户可以同时与地图和 Flutter UI 交互。
• 需要在 Platform View 上触发 Flutter 的手势：例如，在视频播放器上滑动来控制音量或亮度。
• Platform View 本身不需要处理特定的手势：例如，广告 View 只需要展示广告，不需要响应用户的滑动操作。

手势穿透的实现方式

实现手势穿透的核心思想是让 Flutter 的手势识别器能够“忽略” Platform View，并将手势事件传递给底层的原生 View。Flutter 提供了多种方式来实现这一点，每种方式都有其适用场景和优缺点。

1. 使用 ExcludeSemantics Widget

ExcludeSemantics Widget 可以阻止其子树中的 Widget 被语义树（Semantics Tree）所包含。语义树用于辅助功能服务，例如屏幕阅读器。虽然 ExcludeSemantics 的主要目的是控制辅助功能，但它也可以间接地影响手势处理。

原理：当 ExcludeSemantics 的 excluding 属性设置为 true 时，它会阻止其子树中的 Widget 出现在语义树中。这会导致 Flutter 的手势识别器认为这些 Widget 是“不可见的”，从而忽略它们的手势事件。

代码示例：

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

class MyPlatformView extends StatefulWidget {
  @override
  _MyPlatformViewState createState() => _MyPlatformViewState();
}

class _MyPlatformViewState extends State<MyPlatformView> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 200,
      child: ExcludeSemantics(
        excluding: true,
        child: AndroidView(
          viewType: 'my_platform_view',
          creationParams: <String, dynamic>{},
          creationParamsCodec: const StandardMessageCodec(),
        ),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('手势穿透示例'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              MyPlatformView(),
              GestureDetector(
                onTap: () {
                  print('Flutter GestureDetector 被点击');
                },
                child: Container(
                  width: 150,
                  height: 150,
                  color: Colors.blue.withOpacity(0.5),
                  child: const Center(
                    child: Text(
                      '点击我',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

优点：简单易用，只需使用 ExcludeSemantics 包裹 Platform View 即可。

缺点：

• 影响辅助功能：ExcludeSemantics 会阻止 Platform View 出现在语义树中，导致屏幕阅读器无法访问 Platform View 的内容。
• 行为不确定：ExcludeSemantics 的手势穿透行为并非其设计目的，因此在某些情况下可能无法正常工作。
• 仅适用于 Android：此方法在 iOS 上可能无效。

2. 使用 GestureDetector 的 behavior 属性

GestureDetector Widget 可以检测各种手势，例如点击、滑动、长按等。GestureDetector 的 behavior 属性控制其如何处理手势事件。

原理：HitTestBehavior 枚举定义了 GestureDetector 如何与 Widget 树中的其他 Widget 交互。我们可以将 behavior 设置为 HitTestBehavior.translucent 或 HitTestBehavior.deferToChild 来实现手势穿透。

• HitTestBehavior.translucent：GestureDetector 会接收手势事件，但不会阻止事件传递给其下方的 Widget。
• HitTestBehavior.deferToChild：GestureDetector 只在其子 Widget 接收手势事件时才接收事件。

代码示例：

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

class MyPlatformView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 200,
      child: AndroidView(
        viewType: 'my_platform_view',
        creationParams: <String, dynamic>{},
        creationParamsCodec: const StandardMessageCodec(),
      ),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('手势穿透示例'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              GestureDetector(
                behavior: HitTestBehavior.translucent, // 或 HitTestBehavior.deferToChild
                child: MyPlatformView(),
              ),
              GestureDetector(
                onTap: () {
                  print('Flutter GestureDetector 被点击');
                },
                child: Container(
                  width: 150,
                  height: 150,
                  color: Colors.blue.withOpacity(0.5),
                  child: const Center(
                    child: Text(
                      '点击我',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

优点：

• 控制更精细：可以通过 behavior 属性控制手势事件的传递方式。
• 不影响辅助功能：不会阻止 Platform View 出现在语义树中。

缺点：

• 需要额外的 GestureDetector：需要在 Platform View 的父 Widget 上添加一个 GestureDetector。
• 可能需要处理手势冲突：如果 Platform View 本身也需要处理手势，则可能需要处理手势冲突。

3. 使用原生平台的消息通道

更高级的方法是使用原生平台的消息通道，直接将 Flutter 的手势事件传递给原生 View。这种方法需要修改原生平台的代码，但可以实现更精细的控制和更高的性能。

原理：

1. Flutter 端：使用 RawGestureDetector Widget 获取原始的手势事件，并将事件信息通过消息通道发送给原生平台。
2. 原生平台端：接收到 Flutter 发送的手势事件后，将事件转发给底层的原生 View。

代码示例：

Flutter 端：

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

class MyPlatformView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 200,
      child: AndroidView(
        viewType: 'my_platform_view',
        creationParams: <String, dynamic>{},
        creationParamsCodec: const StandardMessageCodec(),
      ),
    );
  }
}

class GesturePassThroughPlatformView extends StatefulWidget {
  @override
  _GesturePassThroughPlatformViewState createState() => _GesturePassThroughPlatformViewState();
}

class _GesturePassThroughPlatformViewState extends State<GesturePassThroughPlatformView> {
  static const platform = MethodChannel('gesture_channel');

  void _handlePan(Offset delta) {
    try {
      platform.invokeMethod('passGesture', {'dx': delta.dx, 'dy': delta.dy});
    } on PlatformException catch (e) {
      print("Failed to send gesture: '${e.message}'.");
    }
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: {
        PanGestureRecognizer: GestureRecognizerFactoryWithHandlers<PanGestureRecognizer>(
              () => PanGestureRecognizer(),
              (PanGestureRecognizer instance) {
            instance
              ..onUpdate = (DragUpdateDetails details) {
                _handlePan(details.delta);
              };
          },
        ),
      },
      child: MyPlatformView(),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('手势穿透示例'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              GesturePassThroughPlatformView(),
              GestureDetector(
                onTap: () {
                  print('Flutter GestureDetector 被点击');
                },
                child: Container(
                  width: 150,
                  height: 150,
                  color: Colors.blue.withOpacity(0.5),
                  child: const Center(
                    child: Text(
                      '点击我',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Android 端 (Kotlin)：

import android.content.Context
import android.view.MotionEvent
import android.view.View
import android.view.ViewGroup
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.common.MethodChannel.MethodCallHandler
import io.flutter.plugin.common.MethodChannel.Result
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {
    private val CHANNEL = "gesture_channel"
    private var platformView: View? = null

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)

        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            when (call.method) {
                "passGesture" -> {
                    val dx = call.argument<Double>("dx") ?: 0.0
                    val dy = call.argument<Double>("dy") ?: 0.0

                    // 假设 platformView 是你的原生 View
                    platformView?.dispatchTouchEvent(
                            MotionEvent.obtain(
                                    System.currentTimeMillis(),
                                    System.currentTimeMillis(),
                                    MotionEvent.ACTION_MOVE,
                                    dx.toFloat(),
                                    dy.toFloat(),
                                    0
                            )
                    )
                    result.success(null)
                }
                else -> {
                    result.notImplemented()
                }
            }
        }

        // 创建 PlatformView (简化示例，实际需要创建 PlatformViewFactory)
        flutterEngine.platformViewsController
                .registry
                .registerViewFactory("my_platform_view") { context: Context, viewId: Int, args: Any? ->
                    platformView = View(context)
                    platformView!!
                }
    }
}

优点：

• 控制最精细：可以完全控制手势事件的传递方式。
• 性能最高：直接在原生平台处理手势事件，避免了 Flutter 的手势识别器的开销。

缺点：

• 实现最复杂：需要修改 Flutter 和原生平台的代码。
• 平台依赖性强：需要为不同的平台编写不同的代码。

总结：选择哪种方式？

选择哪种方式取决于具体的需求和场景。以下是一些建议：

• 如果只是简单地让 Flutter 的手势穿透 Platform View，并且不需要考虑辅助功能，可以使用 ExcludeSemantics。
• 如果需要更精细地控制手势事件的传递方式，并且不希望影响辅助功能，可以使用 GestureDetector 的 behavior 属性。
• 如果需要实现复杂的手势交互，或者需要获得最高的性能，可以使用原生平台的消息通道。

方法	优点	缺点	适用场景
ExcludeSemantics	简单易用，只需包裹 Platform View 即可。	影响辅助功能，行为不确定，仅适用于 Android。	简单地让 Flutter 的手势穿透 Platform View，并且不需要考虑辅助功能。
GestureDetector 的 behavior 属性	控制更精细，不影响辅助功能。	需要额外的 GestureDetector，可能需要处理手势冲突。	需要更精细地控制手势事件的传递方式，并且不希望影响辅助功能。
原生平台的消息通道	控制最精细，性能最高。	实现最复杂，平台依赖性强。	需要实现复杂的手势交互，或者需要获得最高的性能。

注意事项

• 手势冲突：如果 Platform View 本身也需要处理手势，则需要处理手势冲突。例如，可以使用 GestureRecognizer 的 team 属性来协调不同手势识别器之间的关系。
• 坐标转换：Flutter 和原生平台的坐标系可能不同，因此需要进行坐标转换。可以使用 RenderBox 的 localToGlobal 方法将 Flutter 的坐标转换为全局坐标，然后再将全局坐标转换为原生平台的坐标。
• 性能优化：手势穿透可能会带来性能开销，特别是在使用原生平台的消息通道时。需要仔细评估性能，并进行必要的优化。例如，可以减少消息的发送频率，或者使用更高效的消息编码方式。
• 平台兼容性：不同的平台对手势处理的支持程度可能不同。需要针对不同的平台进行测试和适配。

总结：根据实际需求选择合适的手势传递方案

Platform View 的手势穿透是一个复杂的问题，需要根据具体的需求和场景选择合适的解决方案。理解 Flutter 的手势处理机制和原生 View 的事件响应机制是解决问题的关键。通过灵活运用 Flutter 提供的 API 和原生平台的消息通道，我们可以实现各种复杂的手势交互，从而构建出更加丰富和强大的 Flutter 应用。