Question

考虑以下片段：

      body: GestureDetector(
        onTapUp: (details) => print('webview tapped $details'),
        child: WebView(
          initialUrl: 'https://google.com',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      ),

我想在WebView上捕获点击事件，并避免它们在WebView中执行。我想自己评估点击事件。但是，平移/缩放事件仍应由WebView处理。

但是，上面的代码基本上什么也不做。 WebView仍会获取并执行所有点击事件。

Answer 1

我能够解决这个难题。解决方案是：

      body: Stack(
        children: [
          WebView(
            initialUrl: 'https://google.com',
            javascriptMode: JavascriptMode.unrestricted,
          ),
          GestureDetector(
            behavior: HitTestBehavior.translucent,
            onTapDown: (_) => print('webview onTapDown $_'),
            onTapUp: (_) => print('webview onTapUp $_'),
            child: Container(),
          ),
        ],
      ),

解释很简单：

Flutter在指针向上扫掠手势舞台，并且第一个手势识别器获胜。在问题的片段中，WebView本身是第一个手势识别器，而GestureDetector是第二个（儿童优先级）。

通过布置具有半透明覆盖层的堆栈，覆盖层将成为第一个识别器，而WebView将成为第二个识别器。因此，当竞技场横扫时，自定义的GestureDetector将获胜。

Answer 2

使用像以下示例一样，具有gestureRecognizers的TapGestureRecognizer属性

WebView(
  initialUrl: someUrl,
  gestureRecognizers: Set()
    ..add(Factory<TapGestureRecognizer>(
      () => TapGestureRecognizer())),
)

或者，写另一种方式：

var verticalGestures = Factory<TapGestureRecognizer>(
  () => TapGestureRecognizer());
var gestureSet = Set.from([verticalGestures]);
return WebView(
  initialUrl: someUrl,
  gestureRecognizers: gestureSet,
);

在WebView上捕获onTap

2 个答案: