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

點擊事件穿透藍色盒子到紅色盒子，紅色盒子接收到了點擊事件。

使用場景

1、根據業務需求禁用/啓用多個組件。

2、根據業務需求禁用/啓用整個App。

交流

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

170+組件詳細用法：http://laomengit.com

如果你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流羣（微信：laomengit）。

同時也歡迎關注我的Flutter公衆號【老孟程序員】，公衆號首發Flutter的相關內容。

Flutter生態建設離不開你我他，需要大家共同的努力，點贊也是其中的一種，如果文章幫助到了你，希望點個贊。