flutter学习-day14-事件处理和通知
目录
- 原始指针事件处理
- Listener组件
- 忽略指针事件
- 手势识别
- 单击双击和长按
- 拖动和滑动
- 缩放
- GestureRecognizer语义手势
- 事件机制
- 通知
- 监听通知
- 自定义通知
- 阻止冒泡
本文学习和引用自《Flutter实战·第二版》：作者：杜文
1. 原始指针事件
在移动端，各个平台或UI系统的原始指针事件模型基本都是一致，即：一次完整的事件分为三个阶段：手指按下、手指移动、和手指抬起，而更高级别的手势（如点击、双击、拖动等）都是基于这些原始事件的。当指针按下时，Flutter会对应用程序执行命中测试(Hit Test)，以确定指针与屏幕接触的位置存在哪些组件（widget）， 指针按下事件（以及该指针的后续事件）然后被分发到由命中测试发现的最内部的组件，然后从那里开始，事件会在组件树中向上冒泡，这些事件会从最内部的组件被分发到组件树根的路径上的所有组件。
1-1. Listener组件
Flutter中，可以通过Listener组件来监听指针触摸事件，有如下事件：
| 事件名 | 描述 |
|---|---|
| onPointerDown | 手指按下回调 |
| onPointerMove | 手指移动回调 |
| onPointerUp | 手指抬起回调 |
| onPointerCancel | 触摸事件取消回调 |
| behavior | 子组件如何响应命中测试 |
- 事件属性
| 属性 | 描述 |
|---|---|
| position | 指针相对于当对于全局坐标的偏移 |
| localPosition | 指针相对于当对于本身布局坐标的偏移 |
| delta | 两次指针移动事件的距离 |
| pressure | 按压力度，如果手机屏幕不支持压力传感器，则始终为1 |
| orientation | 指针移动方向，是一个角度值 |
如下例子，手指在一个容器上移动时查看手指相对于容器的位置：
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
PointerEvent? myEventObj;
Widget build(BuildContext context) {
return Listener(
child: Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: Container(
alignment: Alignment.center,
width: 300.0,
height: 150.0,
child: Text('点击此处：${myEventObj?.localPosition ?? ''}')),
floatingActionButton: FloatingActionButton(
onPressed: () async {}, child: const Icon(Icons.palette))),
onPointerDown: (PointerDownEvent event) =>
setState(() => myEventObj = event),
onPointerMove: (PointerMoveEvent event) =>
setState(() => myEventObj = event),
onPointerUp: (PointerUpEvent event) => setState(() => myEventObj = event));
}
}
1-2. 忽略指针事件
假如我们不想让某个子树响应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) => debugPrint("a"),
),
),
onPointerDown: (event) => debugPrint("b"),
)
2. 手势识别
GestureDetector是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。GestureDetector 内部封装了 Listener，用以识别语义化的手势。
2-1. 单击双击和长按
当同时监听onTap和onDoubleTap事件时，当用户触发tap事件时，会有200毫秒左右的延时，这是因为当用户点击完之后很可能会再次点击以触发双击事件，所以GestureDetector会等一段时间来确定是否为双击事件。如果只监听了onTap（没有监听onDoubleTap）事件时，则没有延时。
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
String msg = '';
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: Center(
child: GestureDetector(
child: Container(
alignment: Alignment.center,
color: Colors.blue,
width: 200.0,
height: 100.0,
child: Text(
msg,
style: const TextStyle(color: Colors.white),
),
),
onTap: () {
setState(() {
msg = '单击';
});
},
onDoubleTap: () {
setState(() {
msg = '双击';
});
},
onLongPress: () {
msg = '长按';
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {}, child: const Icon(Icons.palette)));
}
}
2-2. 拖动和滑动
GestureDetector对于拖动和滑动事件是没有区分的，他们本质上是一样的。GestureDetector会将要监听的组件的原点（左上角）作为本次手势的原点，当用户在监听的组件上按下手指时，手势识别就会开始。
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
double topOffset = 0.0;
double leftOffset = 0.0;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: Stack(
children: [
Positioned(
top: topOffset,
left: leftOffset,
child: GestureDetector(
onPanDown: (DragDownDetails ev) {
debugPrint('手指按下');
},
onPanUpdate: (DragUpdateDetails ev) {
setState(() {
topOffset += ev.delta.dy;
leftOffset += ev.delta.dx;
});
},
onPanEnd: (DragEndDetails ev) {
debugPrint('手指拿开');
},
child: const CircleAvatar(
child: Text('拖'),
),
),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () async {}, child: const Icon(Icons.palette)));
}
}
2-3. 缩放
GestureDetector也可以监听缩放事件，如下例子：
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
double imgW = 200;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: Center(
child: GestureDetector(
child: Image.asset('static/portrait.png', width: imgW,),
onScaleUpdate: (ScaleUpdateDetails details) {
setState(() {
imgW = 200 * details.scale.clamp(.8, 10.0);
});
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: () async {}, child: const Icon(Icons.palette)));
}
}
2-4. GestureRecognizer语义手势
GestureRecognizer的作用就是通过Listener来将原始指针事件转换为语义手势，它是一个抽象类，一种手势的识别器对应一个GestureRecognizer的子类。
例子，给一段富文本（RichText）的不同部分分别添加点击事件处理器：
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
TapGestureRecognizer myTapGestureRecognizer = TapGestureRecognizer();
bool myToggle = false;
void dispose() {
myTapGestureRecognizer.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: Center(
child: Text.rich(TextSpan(
children: [
const TextSpan(text: 'Hello'),
TextSpan(
recognizer: myTapGestureRecognizer
..onTap = () {
debugPrint('点击$myToggle');
setState(() {
myToggle = !myToggle;
});
},
text: '点我变色',
style: TextStyle(
fontSize: 30.0,
color: myToggle ? Colors.blue : Colors.red),
)
])),
),
floatingActionButton: FloatingActionButton(
onPressed: () {}, child: const Icon(Icons.palette)));
}
}
3. 事件机制
- 组件只有通过命中测试才能响应事件。
- 一个组件是否通过命中测试取决于 hitTestChildren(…) || hitTestSelf(…) 的值
- 组件树中组件的命中测试顺序是深度优先的。
- 组件子节点命中测试的循序是倒序的，并且一旦有一个子节点的 hitTest 返回了 true，就会终止遍历，后续子节点将没有机会参与命中测试。这个原则可以结合 Stack 组件来理解。
- 大多数情况下 Listener 的 HitTestBehavior 为 opaque 或 translucent 效果是相同的，只有当其子节点的 hitTest 返回为 false 时才会有区别。
- HitTestBlocker 是一个很灵活的组件，我们可以通过它干涉命中测试的各个阶段。
4. 通知
通知是Flutter中一个重要的机制，在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。Flutter中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。
4-1. 监听通知
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: NotificationListener(
onNotification: (notification) {
switch (notification.runtimeType){
case ScrollStartNotification: debugPrint("开始滚动"); break;
case ScrollUpdateNotification: debugPrint("正在滚动"); break;
case ScrollEndNotification: debugPrint("滚动停止"); break;
case OverscrollNotification: debugPrint("滚动到边界"); break;
}
return false;
},
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(title: Text("$index"),);
}
),
));
}
}
4-2. 自定义通知
除了 Flutter 内部通知，我们也可以自定义通知。
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
String myMsg = '';
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: NotificationListener<MyNotification>(
onNotification: (notification) {
myMsg += notification.msg.toString();
debugPrint(myMsg);
return true;
},
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(title: Text("$index"),onTap: () {
MyNotification("Hi").dispatch(context);
});
},
),
));
}
}
/// 定义一个通知类，继承自Notification类
class MyNotification extends Notification {
MyNotification(this.msg);
final String msg;
}
# 4-3. 阻止冒泡
Flutter 中的通知机制，默认是冒泡的，Flutter 中通过通知冒泡实现了一套自低向上的消息传递机制，这个和 Web 开发中浏览器的事件冒泡原理类似。即如果一个通知被一个 Widget 消费了，那么这个通知就会被传递，继续传递到父节点。如下例子，将onNotification的返回值修改为true，则通知不会继续传递，即不会继续向上冒泡。
import 'package:flutter/material.dart';
/// 定义
class HomePage extends StatefulWidget {
const HomePage({super.key});
State<HomePage> createState() => HomePageState();
}
/// 实现
class HomePageState extends State<HomePage> {
String myMsg = '';
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Home'),
),
body: NotificationListener<MyNotification>(
onNotification: (notification) {
myMsg += notification.msg.toString();
debugPrint(myMsg);
return false;
},
child: NotificationListener<MyNotification>(
onNotification: (notification) {
/// 返回true 阻止冒泡
return true;
},
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(title: Text("$index"),onTap: () {
MyNotification("Hi").dispatch(context);
});
},
),
),
));
}
}
class MyNotification extends Notification {
MyNotification(this.msg);
final String msg;
}
本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~
往期文章
- 手把手教你搭建规范的团队vue项目，包含commitlint，eslint，prettier，husky，commitizen等等
- Web Woeker和Shared Worker的使用以及案例
- Vue2全家桶+Element搭建的PC端在线音乐网站
- vue3+element-plus配置cdn
- 助你上手Vue3全家桶之Vue3教程
- 助你上手Vue3全家桶之VueX4教程
- 助你上手Vue3全家桶之Vue-Router4教程
- 超详细！Vue的九种通信方式
- 超详细！Vuex手把手教程
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
- 超详细！Vue-Router手把手教程
个人主页
- CSDN
- GitHub
- 简书
- 博客园
- 掘金