Flutter AbsorbPointer 与 IgnorePointer 的区别答案

【问题标题】：Flutter AbsorbPointer vs IgnorePointer differenceFlutter AbsorbPointer 与 IgnorePointer 的区别
【发布时间】：2019-08-21 04:28:22
【问题描述】：

flutter中AbsorbPointer和IgnorePointer有什么区别？

文档提及：

AbsorbPointer 通过终止自身的命中测试来防止其子树接收指针事件。

IgnorePointer，它也阻止其子级接收指针事件，但它本身对命中测试不可见。

我不明白两者在现实生活中的区别是什么。

【问题讨论】：

stackoverflow.com/questions/50600747/…
@Novo 我相信这并没有什么区别。
Flutter: Ignore touch events on a Widget的可能重复

标签： dart flutter

【解决方案1】：

不同之处在于当我们有两个相互重叠的小部件时，它们都可以接收点击。

考虑一个红色和蓝色方块，都可以点击，其中蓝色方块较小，位于红色方块的顶部：

Stack(
  alignment: Alignment.center,
  children: [
     Container(color: Colors.red),
     Container(width: 42, height: 42, color: Colors.blue),
  ],
)

默认情况下，没有IgnorePointer/AbsorbPointer，点击蓝色方块会发送一个蓝色的点击事件，而红色则什么也得不到。

在这种情况下，将蓝色方块包裹成AbsorbPointer 意味着当点击蓝色方块时，蓝色方块和红色方块都不会获得点击事件。

如果我们改用IgnorePointer，当点击蓝色方块时，红色方块会收到点击事件。

【讨论】：

有趣，但有人需要这种区别吗？
有趣。你能用这个简短的答案替换这些小部件的文档吗？
实际上在现实生活中你会遇到一些问题，比如，如果你不想要地图中的手势或者不想要任何两指缩放，那么你会需要这个.
这真的很有趣，但是当我尝试使用 webview_flutter 禁用 WebView 上的点击事件时，它们都不起作用。有人知道为什么吗？

【解决方案2】：

AbsorbPointer本身可以接收点击事件并消费该事件，而IgnorePointer不能接收点击事件，其下的控件可以接收点击事件（不是子控件）。

如果有两个盒子，一个200x200的红色盒子和一个100x100的蓝色盒子，蓝色盒子会显示在红色盒子上方的中间，两个盒子会加上click事件，如下：

  return Container(
      height: 200,
      width: 200,
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Listener(
            onPointerDown: (v) {
              print('click red');
            },
            child: Container(
              color: Colors.red,
            ),
          ),
          Listener(
            onPointerDown: (v) {
              print('click red');
            },
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
          ),
        ],
      ),
    );

点击蓝框时，打印结果：

flutter: click blue

点击蓝框区域外的红框打印结果：

flutter: click red

现在用 AbsorbPointer 包裹蓝色框：

return Container(
  height: 200,
  width: 200,
  child: Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Listener(
        onPointerDown: (v) {
          print('click red');
        },
        child: Container(
          color: Colors.red,
        ),
      ),
      Listener(
        onPointerDown: (v) {
          print('click blue self');
        },
        child: AbsorbPointer(
          child: Listener(
            onPointerDown: (v) {
              print('click blue child');
            },
            child: Container(
              color: Colors.blue,
              width: 100,
              height: 100,
            ),
          ),
        ),
      ),
    ],
  ),
);

点击蓝框，打印如下：

flutter: click blue self

表示AbsorbPointer本身已经收到点击事件。将 AbsorbPointer 改为 IgnorePointer，打印如下：

flutter: click red

点击事件穿透蓝框到红框，红框接收点击事件。

【讨论】：