Flutter 学习 - Widget 之 手势识别

前言

在进行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

更多关于技术相关的内容请关注博主公众号–迷途程序猿