FlutterAbsorbPointer与IgnorePointer的区别

AbsorbPointer

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

用法如下：

AbsorbPointer(
child: Row(
children: [
RaisedButton(onPressed: (){},),
RaisedButton(onPressed: (){},),
RaisedButton(onPressed: (){},),
RaisedButton(onPressed: (){},),
],
),
)


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

AbsorbPointer(
absorbing: false,
...
)


IgnorePointer

IgnorePointer的用法和AbsorbPointer一样，而且达到的效果一样，用法如下：

IgnorePointer(
child: Row(
children: [
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: [
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: [
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生态建设离不开你我他，需要大家共同的努力，点赞也是其中的一种，如果文章帮助到了你，希望点个赞。