如需转载,请注明出处:Flutter学习笔记(32)--PointerEvent事件处理
在Android原生的开发中,对于事件的处理,我们都知道事件分为down、move、up事件,对于ViewGroup有事件分发、拦截和消费处理,对于View有分发和消费处理,在Flutter中也是一样,事件分为down、move、up事件。
在Flutter中对事件的监听是通过Listener来监听原始触摸事件,Listener的构造方法如下:
const Listener({ Key key, this.onPointerDown,//手指按下回调 this.onPointerMove,//手指移动回调 this.onPointerUp,//手指弹起回调 this.onPointerCancel,//触摸事件取消回调 this.behavior = HitTestBehavior.deferToChild,//在命中测试期间如何表现 Widget child, })
先看一下demo示例:
import 'package:flutter/material.dart'; class PointerEventDemo extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'PointerEventDemo', home: _PointerEventDemoHome(), ); } } class _PointerEventDemoHome extends StatefulWidget { @override State<StatefulWidget> createState() { return _PointerEventDemoHomeState(); } } class _PointerEventDemoHomeState extends State { PointerEvent _event; @override Widget build(BuildContext context) { return MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('PointerEventDemo'), ), body: new Container( alignment: Alignment.center, color: Colors.red, width: 400, height: 300, child: new Listener( child: new Container( alignment: Alignment.center, color: Colors.tealAccent, width: 200.0, height: 150.0, child: new Text( _event?.toString() ?? '', style: new TextStyle(color: Colors.red), ), ), //不同响应时的处理 onPointerDown: (PointerDownEvent event) => setState(() => _event = event), onPointerMove: (PointerMoveEvent event) => setState(() => _event = event), onPointerUp: (PointerUpEvent event) => setState(() => _event = event), behavior: HitTestBehavior.translucent, ), ), ), ); } }
Listener本身是一个功能组件,它用来监听内部组件的触摸事件,事件会从最内层的widget一直向上冒泡到最外层的widget,监听到了用户的触摸事件,会回调到对应的响应处理onPointerDown、onPointerMove、onPointerUp。
demo很简单,就是响应用户的触摸操作,然后打印指针坐标。
忽略PointerEvent
假如我们不想让某个子树响应PointerEvent
的话,我们可以使用IgnorePointer
和AbsorbPointer
,这两个组件都能阻止子树接收指针事件,不同之处在于AbsorbPointer
本身会参与命中测试,而IgnorePointer
本身不会参与,这就意味着AbsorbPointer
本身是可以接收指针事件的(但其子树不行),而IgnorePointer
不可以。示例如下:
Listener( child: AbsorbPointer( child: Listener( child: Container( color: Colors.red, width: 200.0, height: 100.0, ), onPointerDown: (event)=>print("in"), ), ), onPointerDown: (event)=>print("up"), )点击
Container
时,由于它在AbsorbPointer
的子树上,所以不会响应指针事件,所以日志不会输出"in",但AbsorbPointer
本身是可以接收指针事件的,所以会输出"up"。如果将AbsorbPointer
换成IgnorePointer
,则两个都不会输出。