浅析Flutter AbsorbPointer 与 IgnorePointer的区别
Flutter是什么?
Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码,在Android 和iOS平台上都可以运行。
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 AbsorbPointer 与 IgnorePointer的区别的文章就介绍到这了,更多相关Flutter AbsorbPointer 与 IgnorePointer的区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!