Flutter AbsorbPointer 与 IgnorePointer的区别

AbsorbPointer

AbsorbPointer是一种禁止用户输入的控件，好比按钮的点击、输入框的输入、ListView的滚动等，你可能说将按钮的onPressed设置为null，同样也能够实现，是的，但AbsorbPointer能够提供多组件的统一控制，而不须要你单独为每个组件设置。

用法以下：

AbsorbPointer(
  child: Row(
    children: <Widget>[
      RaisedButton(onPressed: (){},),
      RaisedButton(onPressed: (){},),
      RaisedButton(onPressed: (){},),
      RaisedButton(onPressed: (){},),

    ],
  ),
)

默认状况下，这些按钮是否响应点击事件的，若是想要响应点击事件只需设置absorbing为false便可：

AbsorbPointer(
  absorbing: false,
  ...
)

IgnorePointer

IgnorePointer的用法和AbsorbPointer同样，并且达到的效果同样，用法以下：

IgnorePointer(
  child: Row(
    children: <Widget>[
      RaisedButton(onPressed: (){},),
      RaisedButton(onPressed: (){},),
      RaisedButton(onPressed: (){},),
      RaisedButton(onPressed: (){},),
    ],
  ),
)

区别

AbsorbPointer自己能够接收点击事件，消耗掉事件，而IgnorePointer没法接收点击事件，其下的控件能够接收到点击事件（不是子控件）。

若是有2个盒子，一个200x200的红色盒子，一个100x100的蓝色盒子，蓝色盒子位于红色盒子之上居中显示，给2个盒子添加点击事件，以下：

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

点击事件穿透蓝色盒子到红色盒子，红色盒子接收到了点击事件。

使用场景

一、根据业务需求禁用/启用多个组件。

二、根据业务需求禁用/启用整个App。

交流

Github地址：https://github.com/781238222/flutter-do

170+组件详细用法：http://laomengit.com

若是你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注个人Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter生态建设离不开你我他，须要你们共同的努力，点赞也是其中的一种，若是文章帮助到了你，但愿点个赞。