Flutter中Android PlatformView版WebView返回键事件监听方案咨询

问题背景 #

开发Flutter应用时，通过Android PlatformView实现了WebView，需要监听返回键事件，同时希望提升PlatformView的手势/事件传递能力，对PlatformViewSurface的gestureRecognizers属性用法存疑。

一、返回键监听实现 #

方案1：Flutter拦截+MethodChannel通信（推荐） #

通过Flutter的WillPopScope拦截返回键事件，再通过MethodChannel和Android侧WebView交互，判断是否可以返回并执行操作：

1. Flutter端将NativeView改为StatefulWidget，用WillPopScope包裹PlatformView，在返回拦截时调用Native方法；
2. Android端在NativeView中注册MethodChannel，处理Flutter发来的"canGoBack"和"goBack"请求，直接操作WebView。

方案2：Android端直接处理返回键 #

在MainActivity中重写onBackPressed，获取WebView实例判断是否可返回，但需要手动管理WebView的生命周期和实例引用，灵活性不如方案1。

二、gestureRecognizers属性用法 #

这个属性用于指定Flutter手势识别器与PlatformView的共存规则：

• 默认Flutter会优先拦截所有手势，导致PlatformView接收不到触摸事件；
• 通过添加手势识别器Factory，可以让指定的手势同时被Flutter和PlatformView处理（或根据hitTestBehavior调整优先级）。

示例：让WebView接收点击、滑动手势

gestureRecognizers: {
  Factory<OneSequenceGestureRecognizer>(() => TapGestureRecognizer()),
  Factory<OneSequenceGestureRecognizer>(() => VerticalDragGestureRecognizer()),
  Factory<OneSequenceGestureRecognizer>(() => HorizontalDragGestureRecognizer()),
},

搭配hitTestBehavior: PlatformViewHitTestBehavior.opaque时，PlatformView会接收所有触摸事件，Flutter手势不会拦截。

三、通用事件传递优化 #

除了手势识别器，还可以通过以下方式增强PlatformView的事件交互：

• MethodChannel/EventChannel：实现双向通信，比如将WebView的加载状态、JS回调传递给Flutter，或接收Flutter的指令操作Native视图；
• Native侧事件拦截：在Android的NativeView中重写dispatchTouchEvent等方法，自定义手势处理逻辑后再传递给WebView。

修改后的完整代码 #

Flutter端（Stateful版本） #

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

class NativeView extends StatefulWidget {
  const NativeView({super.key});

  @override
  State<NativeView> createState() => _NativeViewState();
}

class _NativeViewState extends State<NativeView> {
  late MethodChannel _channel;
  int? _viewId;

  @override
  Widget build(BuildContext context) {
    const String viewType = '<platform-view-type>';
    final Map<String, dynamic> creationParams = {
      "url": "https://upendra-bajpai.github.io/upnotes/"
    };

    return SafeArea(
      child: WillPopScope(
        onWillPop: () async {
          if (_viewId == null) return true;
          // 询问WebView是否可返回
          final bool canGoBack = await _channel.invokeMethod('canGoBack');
          if (canGoBack) {
            // 通知WebView返回
            await _channel.invokeMethod('goBack');
            return false; // 不退出当前页面
          }
          return true; // 退出页面
        },
        child: PlatformViewLink(
          onCreatePlatformView: (param) {
            _viewId = param.id;
            // 绑定对应viewId的MethodChannel
            _channel = MethodChannel('com.example.webview_channel_${param.id}');
            return PlatformViewsService.initSurfaceAndroidView(
              id: param.id,
              viewType: viewType,
              creationParams: creationParams,
              layoutDirection: TextDirection.ltr,
              creationParamsCodec: const StandardMessageCodec(),
              onFocus: () => param.onFocusChanged(true),
            )
              ..addOnPlatformViewCreatedListener(param.onPlatformViewCreated)
              ..create();
          },
          viewType: viewType,
          surfaceFactory: (context, controller) {
            return AndroidViewSurface(
              controller: controller as AndroidViewController,
              gestureRecognizers: {
                Factory<OneSequenceGestureRecognizer>(() => TapGestureRecognizer()),
                Factory<OneSequenceGestureRecognizer>(() => VerticalDragGestureRecognizer()),
                Factory<OneSequenceGestureRecognizer>(() => HorizontalDragGestureRecognizer()),
              },
              hitTestBehavior: PlatformViewHitTestBehavior.opaque,
            );
          },
        ),
      ),
    );
  }
}

Android端 #

NativeView.kt

import android.content.Context
import android.webkit.WebView
import android.webkit.WebViewClient
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugin.platform.PlatformView

class NativeView(
    context: Context,
    viewId: Int,
    creationParams: Map<String?, Any?>?
) : PlatformView, MethodChannel.MethodCallHandler {
    private val webView: WebView = WebView(context)
    private val channel: MethodChannel

    init {
        // 初始化WebView配置
        webView.settings.javaScriptEnabled = true
        webView.webViewClient = WebViewClient()
        val url = creationParams?.get("url") as? String ?: ""
        webView.loadUrl(url)

        // 创建对应viewId的MethodChannel
        channel = MethodChannel(
            context.flutterEngine?.dartExecutor ?: error("Flutter Engine not found"),
            "com.example.webview_channel_$viewId"
        )
        channel.setMethodCallHandler(this)
    }

    override fun getView() = webView

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        when (call.method) {
            "canGoBack" -> result.success(webView.canGoBack())
            "goBack" -> {
                if (webView.canGoBack()) {
                    webView.goBack()
                    result.success(true)
                } else {
                    result.success(false)
                }
            }
            else -> result.notImplemented()
        }
    }

    override fun dispose() {
        webView.destroy()
        channel.setMethodCallHandler(null)
    }
}

NativeViewFactory.kt

import android.content.Context
import io.flutter.plugin.common.StandardMessageCodec
import io.flutter.plugin.platform.PlatformView
import io.flutter.plugin.platform.PlatformViewFactory

class NativeViewFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        val creationParams = args as? Map<String?, Any?>
        return NativeView(context, viewId, creationParams)
    }
}

MainActivity.kt

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        flutterEngine.platformViewsController.registry.registerViewFactory(
            "<platform-view-type>",
            NativeViewFactory()
        )
    }
}

内容的提问来源于stack exchange，提问作者upendra