Flutter AbsorbPointer 與 IgnorePointer的區別

• 2020 年 4 月 10 日
• 筆記

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個盒子，一個200×200的紅色盒子，一個100×100的藍色盒子，藍色盒子位於紅色盒子之上居中顯示，給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生態建設離不開你我他，需要大家共同的努力，點贊也是其中的一種，如果文章幫助到了你，希望點個贊。