前言
在进行Android开发的时候我们通常会遇到事件这个词，比如OnTouch事件，点击事件等等，Android中的点击事件是直接在控件上进行添加，那在Flutter中我们需要怎么给Widget添加一些事件呢，这篇文章将介绍Flutter中的手势事件
在Flutter中我们发现按钮有onPressed来响应点击事件，但是我们如果想要监听Text，就会看到没有onPressed这个属性，想要给Text添加点击事件，就需要专门处理手势事件的Widget来嵌套Text，在Flutter中手势其实也是一个Widget，正是应了那么话，EveryThing is a Widget ！！！
正文
Flutter 中 手势识别的Widget 是 GestureDetector
手势的使用很简单，我们只要在GestureDetector中嵌套需要检测手势的Widget就行，然后实现想要监听的手势的方法就行
效果图
老规矩，有图有真相，我们先看效果，
tips：看右边控制台的输出
代码
下面是GestureDetector的代码示例
GestureDetector(
child: Text(
"点我",
style: TextStyle(fontSize: 36),
),
onDoubleTap: () {
print("onDoubleTap");
},
onForcePressEnd: (ForcePressDetails forcePressDetails) {
// print("onForcePressEnd = " +
// forcePressDetails.localPosition.toString());
},
onHorizontalDragDown: (DragDownDetails dragDownDetails) {
// print("onHorizontalDragDown = " +
// dragDownDetails.localPosition.toString());
},
onLongPress: () {
print("onLongPress");
},
onPanDown: (DragDownDetails dragDownDetails) {
// print("onPanDown = " + dragDownDetails.localPosition.toString());
},
onScaleStart: (ScaleStartDetails scaleStartDetails) {
// print("onScaleStart = " + scaleStartDetails.toString());
},
onSecondaryTapDown: (TapDownDetails tapDownDetails) {
// print("onSecondaryTapDown = " + tapDownDetails.toString());
},
onTap: () {
print("onTap");
},
onVerticalDragDown: (DragDownDetails dragDownDetails) {
// print("onVerticalDragDown = " + dragDownDetails.toString());
},
)
源码分析
下面我们来看下GestureDetector的源码
注：参数均为可选
GestureDetector({
Key key,
this.child,
this.onTapDown,
this.onTapUp,
this.onTap,
this.onTapCancel,
this.onSecondaryTapDown,
this.onSecondaryTapUp,
this.onSecondaryTapCancel,
this.onDoubleTap,
this.onLongPress,
this.onLongPressStart,
this.onLongPressMoveUpdate,
this.onLongPressUp,
this.onLongPressEnd,
this.onVerticalDragDown,
this.onVerticalDragStart,
this.onVerticalDragUpdate,
this.onVerticalDragEnd,
this.onVerticalDragCancel,
this.onHorizontalDragDown,
this.onHorizontalDragStart,
this.onHorizontalDragUpdate,
this.onHorizontalDragEnd,
this.onHorizontalDragCancel,
this.onForcePressStart,
this.onForcePressPeak,
this.onForcePressUpdate,
this.onForcePressEnd,
this.onPanDown,
this.onPanStart,
this.onPanUpdate,
this.onPanEnd,
this.onPanCancel,
this.onScaleStart,
this.onScaleUpdate,
this.onScaleEnd,
this.behavior,
this.excludeFromSemantics = false,
this.dragStartBehavior = DragStartBehavior.start,
})
| 参数名字 | 参数类型 | 意义 | 必选 or 可选 |
|---|---|---|---|
| key | Key | Widget 的标识 | 可选 |
| child | Widget | 要检测手势事件的 Widget | 可选 |
| onTapDown | GestureTapDownCallback | 手指触摸屏幕时产生 onTapDown 事件 | 可选 |
| onTapUp | GestureTapDownCallback | 手指离开屏幕时产生 onTapUp 事件，之后便会触发 onTap 事件 | 可选 |
| onTap | GestureTapCallback | 点击事件 | 可选 |
| onTapCancel | GestureTapCancelCallback | 当触发 onTapDown 之后，取消点击，则会触发 onTapCancel，后面的 onTapDown 和 onTapUp 都不会在触发 | 可选 |
| onDoubleTap | GestureTapCallback | 双击事件 | 可选 |
| onLongPress | GestureLongPressCallback | 长按屏幕时触发，当监听了 onLongPress 事件时，则不能监听 onLongPressDragStart、onLongPressDragUpdate、onLongPressDragUp | 可选 |
| onLongPressUp | GestureLongPressUpCallback | 长按屏幕，手指离开屏幕时触发，当监听了 onLongPressUp 事件时，则不能监听 onLongPressDragStart、onLongPressDragUpdate、onLongPressDragUp | 可选 |
| onLongPressDragStart | GestureLongPressDragStartCallback | 长按屏幕，并准备开始拖动时触发，当监听了 onLongPressDragStart 事件时，则不能监听 onLongPress、onLongPressUp | 可选 |
| onLongPressDragUpdate | GestureLongPressDragUpdateCallback | 长按屏幕后并拖动时触发，当监听了 onLongPressDragUpdate 事件时，则不能监听 onLongPress、onLongPressUp | 可选 |
| onLongPressDragUp | GestureLongPressDragUpCallback | 长按屏幕拖动，手指离开屏幕时触发，当监听了 onLongPressDragUp 事件时，则不能监听 onLongPress、onLongPressUp | 可选 |
| onVerticalDragDown | GestureDragDownCallback | 手指接触屏幕，并且可能会开始垂直移动时触发 | 可选 |
| onVerticalDragStart | GestureDragStartCallback | 手指接触屏幕，并且已经开始垂直移动时触发 | 可选 |
| onVerticalDragUpdate | GestureDragUpdateCallback | 手指接触屏幕，并且垂直移动时触发 | 可选 |
| onVerticalDragEnd | GestureDragEndCallback | 手指接触屏幕垂直移动，然后手指离开屏幕时触发 | 可选 |
| onVerticalDragCancel | GestureDragCancelCallback | 当 onVerticalDragDown 没有完成时就会触发 onVerticalDragCancel | 可选 |
| onHorizontalDragDown | GestureDragDownCallback | 手指接触屏幕，并且可能会开始水平移动时触发 | 可选 |
| onHorizontalDragStart | GestureDragStartCallback | 手指接触屏幕，并且已经开始水平移动时触发 | 可选 |
| onHorizontalDragUpdate | GestureDragUpdateCallback | 手指接触屏幕，并且水平移动时触发 | 可选 |
| onHorizontalDragEnd | GestureDragEndCallback | 手指接触屏幕水平移动，然后手指离开屏幕时触发 | 可选 |
| onHorizontalDragCancel | GestureDragCancelCallback | 当 onHorizontalDragDown 没有完成时就会触发 onHorizontalDragCancel | 可选 |
| onForcePressStart | GestureForcePressStartCallback | 手指与屏幕接触，并且当有足够的压力时才会触发，注意，这个事件仅在具有压力检测屏幕的设备上触发。 | 可选 |
| onForcePressPeak | GestureForcePressPeakCallback | 手指与屏幕接触，并且当有压力达到最大时触发，注意，这个事件仅在具有压力检测屏幕的设备上触发。 | 可选 |
| onForcePressUpdate | GestureForcePressUpdateCallback | 手指与屏幕接触，有足够的压力并在屏幕上移动时触发，注意，这个事件仅在具有压力检测屏幕的设备上触发。 | 可选 |
| onForcePressEnd | GestureForcePressEndCallback | 手指与屏幕分开时触发，注意，这个事件仅在具有压力检测屏幕的设备上触发。 | 可选 |
| onPanDown | GestureDragDownCallback | 手指与屏幕接触，并且可能开始移动时触发 | 可选 |
| onPanStart | GestureDragStartCallback | 手指与屏幕接触，并且开始移动时触发 | 可选 |
| onPanUpdate | GestureDragUpdateCallback | 手指在屏幕上移动时触发 | 可选 |
| onPanEnd | GestureDragEndCallback | 手指离开屏幕时触发 | 可选 |
| onPanCancel | GestureDragCancelCallback | 当 onPanDown 没有完成时触发 onPanCancel | 可选 |
| onScaleStart | GestureTapDownCallback | 手指与屏幕接触，并且即将有缩放操作时触发，初始值为 1.0 | 可选 |
| onScaleUpdate | GestureTapDownCallback | 手指与屏幕接触，并且有缩放操作时触发 | 可选 |
| onScaleEnd | GestureTapDownCallback | onScaleStart 之后，手指离开屏幕时触发 | 可选 |
| behavior | HitTestBehavior | 在命中测试期间，此手势检测器应如何表现。 | 可选 |
| excludeFromSemantics | bool | 是否从语义树中排除这些手势。因为 Widget | 可选 |
| dragStartBehavior | DragStartBehavior | 确定处理拖动开始行为的方式。 | 可选 |
关于Flutter中GestureDetector的使用方法就介绍完了。
以下是我的Flutter系列的链接，后续会持续更新，欢迎大家指正。
Flutter 系列文章
- Flutter 学习 - 开篇
- Flutter 学习 - 基础框架
- Flutter 学习 - 网络请求和数据解析
- Flutter 学习 - Widget 之 Text
- Flutter 学习 - Widget 之 RichText
- Flutter 学习 - Widget 之 Image和Icon
- Flutter 学习 - Widget 之 TextField
- Flutter 学习 - Widget 之 对话框
- Flutter 学习 - Widget 之 菜单按钮
- Flutter 学习 - Widget 之 布局 Widget
- Flutter 学习 - 容器类Widget
- Flutter 学习 - 可滚动的 Widget
- Flutter 学习 - 功能类Widget
更多关于技术相关的内容请关注博主公众号–迷途程序猿
