Flutter--GestureDetector手势识别组件

一、GestureDetector 的介绍

GestureDetector:是手势识别的组件,可以识别点击、双击、长按事件、拖动、缩放等手势

二、GestureDetector的源码介绍

GestureDetector({
    Key key,
    this.child,
    this.onTapDown,//按下时回调
    this.onTapUp,//抬起时回调
    this.onTap,//点击事件回调
    this.onTapCancel,//点击取消事件回调
    this.onSecondaryTap,
    this.onSecondaryTapDown,
    this.onSecondaryTapUp,
    this.onSecondaryTapCancel,
    this.onTertiaryTapDown,
    this.onTertiaryTapUp,
    this.onTertiaryTapCancel,
    this.onDoubleTapDown,//短时间内双击按下时回调
    this.onDoubleTap,//短时间内双击回调
    this.onDoubleTapCancel,//短时间内双击取消事件回调
    this.onLongPress,//长按事件回调
    this.onLongPressStart,//长按开始事件回调
    this.onLongPressMoveUpdate,//长按移动事件回调
    this.onLongPressUp,//长按抬起事件回调
    this.onLongPressEnd,//长按结束事件回调
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    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,
  }) : assert(excludeFromSemantics != null),
       assert(dragStartBehavior != null),
       assert(() {
         final bool haveVerticalDrag = onVerticalDragStart != null || onVerticalDragUpdate != null || onVerticalDragEnd != null;
         final bool haveHorizontalDrag = onHorizontalDragStart != null || onHorizontalDragUpdate != null || onHorizontalDragEnd != null;
         final bool havePan = onPanStart != null || onPanUpdate != null || onPanEnd != null;
         final bool haveScale = onScaleStart != null || onScaleUpdate != null || onScaleEnd != null;
         if (havePan || haveScale) {
           if (havePan && haveScale) {
             throw FlutterError.fromParts(<DiagnosticsNode>[
               ErrorSummary('Incorrect GestureDetector arguments.'),
               ErrorDescription(
                 'Having both a pan gesture recognizer and a scale gesture recognizer is redundant; scale is a superset of pan.'
               ),
               ErrorHint('Just use the scale gesture recognizer.')
             ]);
           }
           final String recognizer = havePan ? 'pan' : 'scale';
           if (haveVerticalDrag && haveHorizontalDrag) {
             throw FlutterError(
               'Incorrect GestureDetector arguments.\n'
               'Simultaneously having a vertical drag gesture recognizer, a horizontal drag gesture recognizer, and a $recognizer gesture recognizer '
               'will result in the $recognizer gesture recognizer being ignored, since the other two will catch all drags.'
             );
           }
         }
         return true;
       }()),
       super(key: key);

三、GestureDetector的属性介绍

属性 说明
onTapDown 按下时回调
onTapUp 抬起时回调
onTap 点击事件回调
onTapCancel 点击取消事件回调
onDoubleTapDown 短时间内双击按下时回调
onDoubleTap 短时间内双击回调
onDoubleTapCancel 短时间内双击取消事件回调
onLongPress 长按事件回调
onLongPressStart 长按开始事件回调
onLongPressMoveUpdate 长按移动事件回调
onLongPressUp 长按抬起事件回调
onLongPressEnd 长按结束事件回调
onVerticalDragDown 垂直滑动按下事件回调
onVerticalDragStart 垂直滑动开始事件回调
onVerticalDragUpdate 垂直滑动更新事件回调
onVerticalDragEnd 垂直滑动结束事件回调
onVerticalDragCancel 垂直滑动取消事件回调
onHorizontalDragDown 水平滑动按下事件回调
onHorizontalDragStart 水平滑动开始事件回调
onHorizontalDragUpdate 水平滑动更新事件回调
onHorizontalDragEnd 水平滑动结束事件回调
onHorizontalDragCancel 水平滑动取消事件回调
onPanDown 按压时回调(我自己理解为点击事件,但是比onTap优先级高,onPan先执行先取消,onPan比onTap多个滑动监听)
onPanStart 按压拖动开始回调
按压开始,不能与 onScale ,onVerticalDrag,onHorizontalDrag,同时使用
onPanUpdate 按压拖动回调
onPanEnd 按压拖动结束回调
onPanCancel 按压拖动取消回调
onScaleStart 缩放开始事件回调
缩放开始,不能与 onPan ,onVerticalDrag,onHorizontalDrag,同时使用
onScaleUpdate 缩放更新事件回调
onScaleEnd 缩放结束事件回调
behavior 手势检测器在触摸中应该如何工作
HitTestBehavior.deferToChild:只有当前容器中的child被点击时才会响应点击事件
HitTestBehavior.opaque:点击整个区域都会响应点击事件,但是点击事件不可穿透向下传递,注释翻译:阻止视觉上位于其后方的目标接收事件。
HitTestBehavior.translucent:同样是点击整个区域都会响应点击事件,和opaque的区别是点击事件是否可以向下传递,注释翻译:半透明目标既可以在其范围内接受事件,也可以允许视觉上位于其后方的目标接收事件

四、一些触摸事件,监听的调用顺序

4.1、点击屏幕:onPanDown--onPanCancel--onTapDown--onTapUp--onTap
4.2、点击滑动:onPanDown--onTapDown--onTapCancel--onPanStart--onPanUpdate--onPanEnd
4.3、双击屏幕:onPanDown--onPanCancel--onDoubleTapDown--onPanDown--onPanCancel--onDoubleTap
4.4、长按屏幕:onPanDown--onTapDown--onTapCancel--onPanCancel--onLongPressStart--onLongPress--onLongPressMoveUpdate--onLongPressEnd--onLongPressUp
4.5、手指左右滑动:onVerticalDragDown--onHorizontalDragDown--onVerticalDragCancel--onHorizontalDragStart--onHorizontalDragUpdate--onHorizontalDragEnd
4.6、手指上下滑动:onVerticalDragDown--onHorizontalDragDown--onHorizontalDragCancel--onVerticalDragStart--onVerticalDragUpdate--onVerticalDragEnd
4.7、缩放:onScaleStart--onScaleUpdate--onScaleEnd

五、GestureDetector的demo

5.1、给组件添加按键监听
class _GestureDetectorFulState extends State<GestureDetectorFul> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector学习"),
      ),
      body: Center(
        child: GestureDetector(
          //一定要加(按钮和文字之间的空白,也添加监听了)
          behavior: HitTestBehavior.opaque,
          onPanDown: (value) {
            print("我是onPanDown");
          },
          child: Row(
            children: [
              OutlinedButton(
                child: Text("按钮"),
                onPressed: () {
                  print("点击了button");
                },
              ),
              SizedBox(width: 80),
              Text("文字")
            ],
          )
        ),
      )
    ));
  }
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容