Flutter手势识别Widget

前言

我们在前面用到 RaisedButton 中 onPressed 来响应点击事件,但是在 Text 中没有 onPressed 属性,那么如何监听 Text 的点击事件呢?在 Flutter 中那就需要使用专门处理手势事件的 Widget 来嵌套 Text,来实现点击事件。

手势识别的 Widget--GestureDetector

GestureDetector 是用于检测手势的 Widget。

  • 使用:只要用 GestureDetector 嵌套要检测手势的 Widget 就行,然后在 GestureDetector 里实现想要监听的手势的方法就行。
  • 代码示例:
GestureDetector(
    child: Text('Hello Flutter'),
    onTap: (){
        print('tab Text');
    },
)
  • GestureDetector 的构造函数及参数说明:
class GestureDetector extends StatelessWidget {
  GestureDetector({
    Key key, // 可选;类型 Key;Widget 的标识
    this.child, // 可选;类型 Widget;要检测手势事件的 Widget
    this.onTapDown, // 可选;类型 GestureTapDownCallback;手指触摸屏幕时产生 onTapDown 事件
    this.onTapUp, // 可选;类型 GestureTapDownCallback;手指离开屏幕时产生 onTapUp 事件,之后便会触发 onTap 事件
    this.onTap, // 可选;类型 GestureTapCallback;点击事件
    this.onTapCancel, // 可选;类型 GestureTapCancelCallback;当触发 onTapDown 之后,取消点击,则会触发 onTapCancel,后面的 onTapDown 和 onTapUp 都不会再触发
    this.onDoubleTap, // 可选;类型 GestureTapCallback;双击事件
    this.onLongPress, // 可选;类型 GestureLongPressCallback;长按屏幕时触发,当监听了 onLongPress 事件时,则不能监听 
    this.onLongPressUp, // 可选;类型 GestureLongPressUpCallback;长按屏幕,手指离开屏幕时触发,当监听了 onLongPressUp 事件时,则不能监听 onLongPressDragStart、onLongPressDragUpdate、onLongPressDragUp
    this.onLongPressDragStart, // 可选;类型 GestureLongPressDragStartCallback;长按屏幕,并准备开始拖动时触发,当监听了 onLongPressDragStart 事件时,则不能监听onLongPress、onLongPressUp
    this.onLongPressDragUpdate, // 可选;类型 GestureLongPressDragUpdateCallback;长按屏幕后并拖动时触发,当监听了 onLongPressDragUpdate 事件时,则不能监听 onLongPress、onLongPressUp
    this.onLongPressDragUp, // 可选;类型 GestureLongPressDragUpCallback;长按屏幕拖动,手指离开屏幕时触发,当监听了 onLongPressDragUp 事件时,则不能监听 onLongPress、onLongPressUp
    this.onVerticalDragDown, // 可选;类型 GestureDragDownCallback;手指接触屏幕,并且可能会开始垂直移动时触发
    this.onVerticalDragStart, // 可选;类型 GestureDragStartCallback;手指接触屏幕,并且已经开始垂直移动时触发
    this.onVerticalDragUpdate, // 可选;类型 GestureDragUpdateCallback;手指接触屏幕,并且垂直移动时触发
    this.onVerticalDragEnd, // 可选;类型 GestureDragEndCallback;手指接触屏幕垂直移动,然后手指离开屏幕时触发
    this.onVerticalDragCancel, // 可选;类型 GestureDragCancelCallback;当 onVerticalDragDown 没有完成时就会触发 onVerticalDragCancel
    this.onHorizontalDragDown, // 可选;类型 GestureDragDownCallback;手指接触屏幕,并且可能会开始水平移动时触发
    this.onHorizontalDragStart, // 可选;类型 GestureDragStartCallback;手指接触屏幕,并且已经开始水平移动时触发
    this.onHorizontalDragUpdate, // 可选;类型 GestureDragUpdateCallback;手指接触屏幕,并且水平移动时触发
    this.onHorizontalDragEnd, // 可选;类型 GestureDragEndCallback;手指接触屏幕水平移动,然后手指离开屏幕时触发
    this.onHorizontalDragCancel, // 可选;类型 GestureDragCancelCallback;当 onHorizontalDragDown 没有完成时就会触发 onHorizontalDragCancel
    this.onForcePressStart,// 可选;类型 GestureForcePressStartCallback;手指与屏幕接触,并且当有足够的压力时才会触发,注意,这个事件仅在具有压力检测屏幕的设备上触发。
    this.onForcePressPeak, // 可选;类型 GestureForcePressPeakCallback;手指与屏幕接触,并且当有压力达到最大时触发,注意,这个事件仅在具有压力检测屏幕的设备上触发。
    this.onForcePressUpdate, // 可选;类型 GestureForcePressUpdateCallback;手指与屏幕接触,有足够的压力并在屏幕上移动时触发,注意,这个事件仅在具有压力检测屏幕的设备上触发。
    this.onForcePressEnd, // 可选;类型 GestureForcePressEndCallback;手指与屏幕分开时触发,注意,这个事件仅在具有压力检测屏幕的设备上触发。
    this.onPanDown, // 可选;类型 GestureDragDownCallback;手指与屏幕接触,并且可能开始移动时触发
    this.onPanStart, // 可选;类型 GestureDragStartCallback;手指与屏幕接触,并且开始移动时触发
    this.onPanUpdate, // 可选;类型 GestureDragUpdateCallback;手指在屏幕上移动时触发
    this.onPanEnd, // 可选;类型 GestureDragEndCallback;手指离开屏幕时触发
    this.onPanCancel, // 可选;类型 GestureDragCancelCallback    ;当 onPanDown 没有完成时触发 onPanCancel
    this.onScaleStart, // 可选;类型 GestureTapDownCallback;手指与屏幕接触,并且即将有缩放操作时触发,初始值为 1.0
    this.onScaleUpdate, // 可选;类型 GestureTapDownCallback;手指与屏幕接触,并且有缩放操作时触发
    this.onScaleEnd, // 可选;类型 GestureTapDownCallback;onScaleStart 之后,手指离开屏幕时触发
    this.behavior, // 可选;类型 HitTestBehavior;在命中测试期间,此手势检测器应如何表现
    this.excludeFromSemantics = false, // 可选;类型 bool;是否从语义树中排除这些手势
    this.dragStartBehavior = DragStartBehavior.down, // 可选;类型 DragStartBehavior;确定处理拖动开始行为的方式。
  })
  ...
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 今天开始,我们开始系统的学习下flutter widget 框架 介绍 Flutter Widget采用现代响应式...
    充满活力的早晨阅读 1,839评论 0 2
  • 原文在此,此处只为学习 Widget与ElementWidget主要接口Stateless WidgetState...
    lltree阅读 4,499评论 0 1
  • UI 异步 runOnUiThread() 对应什么? Dart 是一种支持 Isolate(多线程)、事件循环和...
    敲代码的本愿阅读 902评论 0 1
  • 浓墨泼上了布席 寒气弥漫了大地 什么遮住了我的双眼? 是浓雾,是浓墨,或是鬼魂 我在黑暗中挣扎奔跑 它们在黑暗中叫...
    邪壹阅读 214评论 0 0
  • 今天我开始学习写简书。 我其实对写文章这块一直是个弱项。我记得在上学的时候,老师安排的作文课,对我来说是最要命的一...
    卓越168阅读 229评论 15 12