Flutter学习笔记（32）--PointerEvent事件处理
2024-10-09 08:47:51
如需转载，请注明出处：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: ,
height: ,
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，则两个都不会输出。最新文章
- HTML5本地存储Localstorage
- 关于iPhone图片的问题。
- Git Commands Quick Notes
- 最新一代文件结构 超高性能解析IP数据库 qqzeng-ip.dat
- HDU5812 Distance（枚举 + 分解因子）
- Instruments_Activity Monitor使用入门
- sqlca.sqlcode
- 图的深度优先搜索算法DFS
- 要做一款APP-解放双手
- spark 操作hbase
- 自制USB wifi信号放大天线
- thinkphp框架的路径问题 - 总结
- JSP 中动态 INCLUDE 与静态 INCLUDE 的区别？
- Webservice WCF WebApi
- sparkSQL catalyst
- 牛客随笔（c++）
- 详解Nginx服务器配置
- SQL自动流水号函数
- Qt信号和槽机制
- python之pygal：掷一个骰子统计次数并以直方图形式显示