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生態建設離不開你我他，須要你們共同的努力，點贊也是其中的一種，若是文章幫助到了你，但願點個贊。