android开发分享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个盒子，一个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地址：

170+组件详细用法：

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

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

flutter生态建设离不开你我他，需要大家共同的努力，点赞也是其中的一种，如果文章帮助到了你，希望点个赞。