GestureDetector介绍
在后面的文章中咱们介绍了Listener，而GestureDetector是对Listener的封装，提供十分多的手势,包含单击、双击、拖动、混合手势等。
视频教程地址
手势系列视频教程地址
什么状况下应用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.onLongPressDown, this.onLongPressCancel, this.onLongPress, this.onLongPressStart, this.onLongPressMoveUpdate, this.onLongPressUp, this.onLongPressEnd, this.onSecondaryLongPressDown, this.onSecondaryLongPressCancel, this.onSecondaryLongPress, this.onSecondaryLongPressStart, this.onSecondaryLongPressMoveUpdate, this.onSecondaryLongPressUp, this.onSecondaryLongPressEnd, this.onTertiaryLongPressDown, this.onTertiaryLongPressCancel, this.onTertiaryLongPress, this.onTertiaryLongPressStart, this.onTertiaryLongPressMoveUpdate, this.onTertiaryLongPressUp, this.onTertiaryLongPressEnd, 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 | GestureTapDownCallback | 手指按下时的回调函数 |
| onTapUp | GestureTapUpCallback | 手指松开时的回调函数 |
| onTap | GestureTapCallback | 手指点击时的回调函数 |
| onTapCancel | GestureTapCancelCallback | 手指勾销点击时的回调函数 |
GestureDetector单击手势利用场景
单击手势个别罕用于给容器增加点击事件
GestureDetector单击手势案例展现
咱们在Container容器上增加了单击手势，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ GestureDetector( onTap: (){ print("onTap"); }, onTapCancel: () { print("onTapCancel"); }, onTapDown: (details) { print("onTapDown---${details.globalPosition}---${details.localPosition}"); }, onTapUp: (details) { print("onTapUp---${details.globalPosition}---${details.localPosition}"); }, child: Container( width: 200, height: 200, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ), ); }}GestureDetector单击手势控制台输入后果
第一种：点击Container容器
flutter: onTapDown---Offset(211.5, 317.0)---Offset(124.0, 45.5)flutter: onTapUp---Offset(211.5, 317.0)---Offset(124.0, 45.5)flutter: onTap第二种：点击Container容器后不松手间接移出区域
flutter: onTapDown---Offset(195.5, 305.5)---Offset(108.0, 34.0)flutter: onTapCancelGestureDetector双击手势
双击手势总共有三种，别离如下：
| 字段 | 属性 | 形容 |
|---|---|---|
| onDoubleTapDown | GestureTapDownCallback | 手指按下时的回调函数 |
| onDoubleTap | GestureTapCallback | 手指双击时的回调函数 |
| onDoubleTapCancel | GestureTapCancelCallback | 手指勾销时的回调函数 |
GestureDetector双击手势利用场景
在特定状况下须要对繁多容器减少双击事件
GestureDetector双击手势案例展现
咱们在Container容器上增加了三种双击手势的回调，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ GestureDetector( onDoubleTap: () { print("onTapDown"); }, onDoubleTapCancel: () { print("onDoubleTapCancel"); }, onDoubleTapDown: (details) { print("onDoubleTapDown---${details.globalPosition}---${details.localPosition}"); }, child: Container( width: 200, height: 200, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ), ); }}GestureDetector双击手势控制台输入后果
第一种：双击Container容器
flutter: onDoubleTapDown---Offset(204.5, 317.0)---Offset(117.0, 45.5)flutter: onTapDown第二种：双击Container容器但不抬起手指并移出区域
flutter: onDoubleTapDown---Offset(195.5, 283.5)---Offset(108.0, 12.0)flutter: onDoubleTapCancelGestureDetector长按手势
长按手势总共有七种，别离如下：
| 字段 | 属性 | 形容 |
|---|---|---|
| onLongPressDown | GestureLongPressDownCallback | 手指按上来时的回调函数 |
| onLongPressCancel | GestureLongPressCancelCallback | 手指长按勾销时的回调函数 |
| onLongPress | GestureLongPressCallback | 手指长按时的回调函数 |
| onLongPressStart | GestureLongPressStartCallback | 手指长按并开始拖动时的回调函数 |
| onLongPressMoveUpdate | GestureLongPressMoveUpdateCallback | 手指长按并挪动时的回调函数 |
| onLongPressUp | GestureLongPressUpCallback | 手指长按并松开时的回调函数 |
| onLongPressEnd | GestureLongPressEndCallback | 手指长按完结拖动时的回调函数 |
GestureDetector长按手势利用场景
长按某组件须要执行特定的办法，比方按钮长按时的水波纹成果
GestureDetector长按手势案例展现
咱们在Container容器上增加了长按手势，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ GestureDetector( onLongPress: (){ print("onLongPress"); }, onLongPressCancel: () { print("onLongPressCancel"); }, onLongPressUp: () { print("onLongPressUp"); }, onLongPressDown: (details) { print("onLongPressDown---${details.globalPosition}---${details.localPosition}"); }, onLongPressEnd: (details) { print("onLongPressEnd---${details.globalPosition}---${details.localPosition}"); }, onLongPressStart: (details) { print("onLongPressStart---${details.globalPosition}---${details.localPosition}"); }, onLongPressMoveUpdate: (details) { print("onLongPressMoveUpdate---${details.globalPosition}---${details.localPosition}"); }, child: Container( width: 200, height: 200, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ), ); }}GestureDetector长按手势控制台输入后果
第一种：单击Container容器
flutter: onLongPressDown---Offset(199.0, 336.0)---Offset(111.5, 64.5)flutter: onLongPressCancel第二种：长按Container容器然而手指不动后松开
flutter: onLongPressDown---Offset(215.0, 301.0)---Offset(127.5, 29.5)flutter: onLongPressStart---Offset(215.0, 301.0)---Offset(127.5, 29.5)flutter: onLongPressflutter: onLongPressEnd---Offset(215.0, 301.0)---Offset(127.5, 29.5)flutter: onLongPressUp第三种：长按Container容器并进行拖动最初松开手指
flutter: onLongPressDown---Offset(169.0, 314.0)---Offset(81.5, 42.5)flutter: onLongPressStart---Offset(169.0, 314.0)---Offset(81.5, 42.5)flutter: onLongPressflutter: onLongPressMoveUpdate---Offset(168.5, 314.5)---Offset(81.0, 43.0)flutter: onLongPressMoveUpdate---Offset(165.0, 318.5)---Offset(77.5, 47.0)flutter: onLongPressMoveUpdate---Offset(164.0, 319.0)---Offset(76.5, 47.5)flutter: onLongPressMoveUpdate---Offset(158.5, 323.5)---Offset(71.0, 52.0)flutter: onLongPressMoveUpdate---Offset(153.0, 329.5)---Offset(65.5, 58.0)flutter: onLongPressMoveUpdate---Offset(148.5, 335.0)---Offset(61.0, 63.5)flutter: onLongPressMoveUpdate---Offset(146.5, 339.0)---Offset(59.0, 67.5)flutter: onLongPressMoveUpdate---Offset(146.5, 339.5)---Offset(59.0, 68.0)flutter: onLongPressEnd---Offset(146.5, 339.5)---Offset(59.0, 68.0)flutter: onLongPressUp第四种：长按Container容器并马上移出区域
flutter: onLongPressDown---Offset(97.0, 277.5)---Offset(9.5, 6.0)flutter: onLongPressCancelflutter: onLongPressDown---Offset(91.5, 275.5)---Offset(4.0, 4.0)flutter: onLongPressCancelGestureDetector垂直滑动手势
垂直滑动手势总共有五种，别离如下：
| 字段 | 属性 | 形容 |
|---|---|---|
| onVerticalDragDown | GestureDragDownCallback | 手指按下时的回调函数 |
| onVerticalDragStart | GestureDragStartCallback | 手指开始垂直滑动时的回调函数 |
| onVerticalDragUpdate | GestureDragUpdateCallback | 手指垂直滑动时的回调函数 |
| onVerticalDragEnd | GestureDragEndCallback | 手指垂直滑动完结时的回调函数 |
| onVerticalDragCancel | GestureDragCancelCallback | 手指垂直滑动勾销时的回调函数 |
GestureDetector垂直滑动手势利用场景
须要对某个组件进行垂直滑动时
GestureDetector垂直滑动手势案例展现
咱们在Container容器上增加了垂直滑动手势，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { double _left = 0; double _top = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ GestureDetector( onVerticalDragCancel: () { print("onVerticalDragCancel"); }, onVerticalDragDown: (details) { print("onVerticalDragDown---${details.globalPosition}---${details.localPosition}"); }, onVerticalDragEnd: (details) { print("onVerticalDragEnd---${details.velocity}---${details.primaryVelocity}"); }, onVerticalDragStart: (details) { print("onVerticalDragStart---${details.globalPosition}---${details.localPosition}"); }, onVerticalDragUpdate: (details) { print("onVerticalDragUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}"); setState(() { _top += details.delta.dy; }); }, child: Stack( children: [ Positioned( left: _left, top: _top, child: Container( width: 200, height: 200, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ) ], ), ), ); }}GestureDetector垂直滑动手势控制台输入
第一种：点击Container容器
flutter: onVerticalDragDown---Offset(76.5, 114.5)---Offset(76.5, 38.5)flutter: onVerticalDragStart---Offset(76.5, 114.5)---Offset(76.5, 38.5)flutter: onVerticalDragEnd---Velocity(0.0, 0.0)---0.0第二种：拖动Container容器
flutter: onVerticalDragDown---Offset(185.5, 332.5)---Offset(185.5, 256.5)flutter: onVerticalDragStart---Offset(185.5, 332.5)---Offset(185.5, 256.5)flutter: onVerticalDragUpdate---Offset(185.5, 332.0)---Offset(185.5, 256.0)flutter: onVerticalDragUpdate---Offset(187.5, 322.0)---Offset(187.5, 246.0)flutter: onVerticalDragUpdate---Offset(192.0, 307.0)---Offset(192.0, 231.0)flutter: onVerticalDragUpdate---Offset(193.5, 298.0)---Offset(193.5, 222.0)flutter: onVerticalDragUpdate---Offset(193.5, 297.0)---Offset(193.5, 221.0)flutter: onVerticalDragEnd---Velocity(131.3, -548.9)----548.8773895303548第三种：拖动Container容器并马上松开
flutter: onVerticalDragDown---Offset(10.5, 93.5)---Offset(10.5, 17.5)flutter: onVerticalDragCancelGestureDetector程度滑动手势
程度滑动手势总共有五种，别离如下：
| 字段 | 属性 | 形容 |
|---|---|---|
| onHorizontalDragDown | GestureDragDownCallback | 手指按下时的回调函数 |
| onHorizontalDragStart | GestureDragStartCallback | 手指开始程度滑动时的回调函数 |
| onHorizontalDragUpdate | GestureDragUpdateCallback | 手指程度滑动时的回调函数 |
| onHorizontalDragEnd | GestureDragEndCallback | 手指程度滑动完结时的回调函数 |
| onHorizontalDragCancel | GestureDragCancelCallback | 手指程度滑动勾销时的回调函数 |
GestureDetector程度滑动手势利用场景
须要对某个组件进行程度滑动时
GestureDetector程度滑动手势案例展现
咱们在Container容器上增加了程度滑动手势，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { double _left = 0; double _top = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ /// 程度滑动 GestureDetector( onHorizontalDragCancel: () { print("onHorizontalDragCancel"); }, onHorizontalDragDown: (details) { print("onHorizontalDragDown---${details.globalPosition}---${details.localPosition}"); }, onHorizontalDragEnd: (details) { print("onHorizontalDragEnd---${details.velocity}---${details.primaryVelocity}"); }, onHorizontalDragStart: (details) { print("onHorizontalDragStart---${details.globalPosition}---${details.localPosition}"); }, onHorizontalDragUpdate: (details) { print("onHorizontalDragUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}"); setState(() { _left += details.delta.dx; }); }, child: Stack( children: [ Positioned( left: _left, top: _top, child: Container( width: 200, height: 200, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ) ], ), ), ); }}GestureDetector程度滑动控制台输入
第一种：点击Container容器
flutter: onHorizontalDragDown---Offset(151.5, 118.0)---Offset(151.5, 42.0)flutter: onHorizontalDragStart---Offset(151.5, 118.0)---Offset(151.5, 42.0)flutter: onHorizontalDragEnd---Velocity(0.0, 0.0)---0.0第二种：拖动Container容器
flutter: onHorizontalDragDown---Offset(97.5, 135.5)---Offset(97.5, 59.5)flutter: onHorizontalDragStart---Offset(97.5, 135.5)---Offset(97.5, 59.5)flutter: onHorizontalDragUpdate---Offset(100.0, 136.0)---Offset(100.0, 60.0)---Offset(2.5, 0.0)flutter: onHorizontalDragUpdate---Offset(100.5, 136.0)---Offset(100.5, 60.0)---Offset(0.5, 0.0)flutter: onHorizontalDragUpdate---Offset(102.0, 136.0)---Offset(102.0, 60.0)---Offset(1.5, 0.0)flutter: onHorizontalDragUpdate---Offset(105.0, 136.5)---Offset(105.0, 60.5)---Offset(3.0, 0.0)flutter: onHorizontalDragUpdate---Offset(107.0, 137.0)---Offset(107.0, 61.0)---Offset(2.0, 0.0)flutter: onHorizontalDragUpdate---Offset(108.5, 137.0)---Offset(108.5, 61.0)---Offset(1.5, 0.0)flutter: onHorizontalDragUpdate---Offset(109.0, 137.0)---Offset(109.0, 61.0)---Offset(0.5, 0.0)flutter: onHorizontalDragUpdate---Offset(110.0, 137.0)---Offset(110.0, 61.0)---Offset(1.0, 0.0)flutter: onHorizontalDragUpdate---Offset(111.0, 137.0)---Offset(111.0, 61.0)---Offset(1.0, 0.0)flutter: onHorizontalDragEnd---Velocity(0.0, 0.0)---0.0第三种：拖动Container容器并马上松开
flutter: onHorizontalDragDown---Offset(6.0, 109.0)---Offset(6.0, 33.0)flutter: onHorizontalDragCancelGestureDetector拖动手势
拖动手势总共有五种，别离如下：
| 字段 | 属性 | 形容 |
|---|---|---|
| onPanDown | GestureDragDownCallback | 手指按下时的回调函数 |
| onPanStart | GestureDragStartCallback | 手指开始拖动时的回调函数 |
| onPanUpdate | GestureDragUpdateCallback | 手指挪动时的回调函数 |
| onPanEnd | GestureDragEndCallback | 手指抬起时的回调函数 |
| onPanCancel | GestureDragCancelCallback | 手指勾销拖动时的回调函数 |
GestureDetector拖动手势利用场景
如微信的全局悬浮按钮
GestureDetector拖动手势案例展现
咱们在Container容器上增加了拖动手势，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { double _left = 0; double _top = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ // 拖动手势 GestureDetector( onPanCancel: () { print("onPanCancel"); }, onPanDown: (details) { print("onPanDown---${details.globalPosition}---${details.localPosition}"); }, onPanEnd: (details) { print("onPanEnd---${details.velocity}---${details.primaryVelocity}"); }, onPanStart: (details) { print("onPanStart---${details.globalPosition}---${details.localPosition}"); }, onPanUpdate: (details) { print("onPanUpdate---${details.globalPosition}---${details.localPosition}---${details.delta}"); setState(() { _left += details.delta.dx; _top += details.delta.dy; }); }, child: Stack( children: [ Positioned( left: _left, top: _top, child: Container( width: 200, height: 200, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ) ], ), ), ); }}GestureDetector拖动手势控制台输入
第一种：点击Container容器
flutter: onPanDown---Offset(161.0, 233.0)---Offset(161.0, 157.0)flutter: onPanStart---Offset(161.0, 233.0)---Offset(161.0, 157.0)flutter: onPanEnd---Velocity(0.0, 0.0)---0.0第二种：拖动Container容器
flutter: onPanDown---Offset(123.5, 193.5)---Offset(123.5, 117.5)flutter: onPanStart---Offset(123.5, 193.5)---Offset(123.5, 117.5)flutter: onPanUpdate---Offset(123.5, 193.0)---Offset(123.5, 117.0)---Offset(0.0, -0.5)flutter: onPanUpdate---Offset(124.0, 193.0)---Offset(124.0, 117.0)---Offset(0.5, 0.0)flutter: onPanUpdate---Offset(124.5, 192.0)---Offset(124.5, 116.0)---Offset(0.5, -1.0)flutter: onPanUpdate---Offset(125.5, 190.5)---Offset(125.5, 114.5)---Offset(1.0, -1.5)flutter: onPanUpdate---Offset(126.0, 190.0)---Offset(126.0, 114.0)---Offset(0.5, -0.5)flutter: onPanUpdate---Offset(126.5, 189.5)---Offset(126.5, 113.5)---Offset(0.5, -0.5)flutter: onPanUpdate---Offset(127.0, 189.0)---Offset(127.0, 113.0)---Offset(0.5, -0.5)flutter: onPanEnd---Velocity(0.0, 0.0)---0.0第三种：拖动Container容器并马上松开
flutter: onPanDown---Offset(5.5, 162.5)---Offset(5.5, 86.5)flutter: onPanCancelGestureDetector缩放手势
缩放手势总共有三种，别离如下：
| 字段 | 属性 | 形容 |
|---|---|---|
| onScaleStart | GestureScaleStartCallback | 开始缩放时的回调函数 |
| onScaleUpdate | GestureScaleUpdateCallback | 缩放挪动时的回调函数 |
| onScaleEnd | GestureScaleEndCallback | 缩放完结时的回调函数 |
GestureDetector缩放手势利用场景
如查看图片须要对图片进行放大或放大时
GestureDetector缩放手势案例展现
咱们在Container容器上增加了缩放手势，代码如下：
import 'package:flutter/material.dart';class GestureDetectorExample extends StatefulWidget { @override _GestureDetectorExampleState createState() => _GestureDetectorExampleState();}class _GestureDetectorExampleState extends State<GestureDetectorExample> { double _left = 0; double _top = 0; double _widthAndHeight = 200; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GestureDetector"), ), body: Center( child: Stack( children: [ /// 缩放手势 GestureDetector( onScaleEnd: (details) { print("onScaleEnd---${details.velocity}---${details.pointerCount}"); }, onScaleStart: (details) { print("onScaleStart---${details.focalPoint}---${details.pointerCount}"); }, onScaleUpdate: (details) { print("onScaleUpdate---${details.scale}---${details.scale.clamp(0.1, 1.2)}"); setState(() { _widthAndHeight = 200 * details.scale.clamp(0.3, 1.8); }); }, child: Container( width: _widthAndHeight, height: _widthAndHeight, color: Colors.orange, alignment: Alignment.center, child: Text("Jimi", style: TextStyle( color: Colors.white, fontSize: 30 ), ), ), ) ], ), ), ); }}第一种：点击Container容器
flutter: onScaleStart---Offset(149.5, 348.0)---1flutter: onScaleEnd---Velocity(0.0, 0.0)---0第二种：单指拖动Container容器
flutter: onScaleStart---Offset(178.0, 304.5)---1flutter: onScaleUpdate---1.0---1.0flutter: onScaleUpdate---1.0---1.0flutter: onScaleUpdate---1.0---1.0flutter: onScaleUpdate---1.0---1.0flutter: onScaleEnd---Velocity(0.0, 0.0)---0第三种：双指缩放Container容器
flutter: onScaleStart---Offset(187.5, 333.5)---2flutter: onScaleUpdate---1.0055027720002572---1.0055027720002572flutter: onScaleUpdate---1.0110087715145855---1.0110087715145855flutter: onScaleUpdate---1.0293231946761667---1.0293231946761667flutter: onScaleUpdate---1.04763763435052---1.04763763435052flutter: onScaleUpdate---1.0531463022961167---1.0531463022961167flutter: onScaleEnd---Velocity(0.0, 0.0)---1GestureDetector其余手势
带有3D Touch性能压力设施触发手势
总共有4个手势
| 字段 | 属性 | 形容 |
|---|---|---|
| onForcePressStart | GestureForcePressStartCallback | 手指强制按下时的回调函数 |
| onForcePressPeak | GestureForcePressPeakCallback | 手指按压力度最大时的回调函数 |
| onForcePressUpdate | GestureForcePressUpdateCallback | 手指按下后挪动时的回调函数 |
| onForcePressEnd | GestureForcePressEndCallback | 手指来到时的回调函数 |
辅助按钮触发手势
| 字段 | 属性 | 形容 |
|---|---|---|
| onSecondaryTap | GestureTapCallback | 辅助按钮单击时的回调函数 |
| onSecondaryTapDown | GestureTapDownCallback | 辅助按钮按下时的回调函数 |
| onSecondaryTapUp | GestureTapUpCallback | 辅助按钮松开时的回调函数 |
| onSecondaryTapCancel | GestureTapCancelCallback | 辅助按钮勾销点击时的回调函数 |
| onSecondaryLongPressDown | GestureLongPressDownCallback | 辅助按钮按上来时的回调函数 |
| onSecondaryLongPressCancel | GestureLongPressCancelCallback | 辅助按钮长按勾销时的回调函数 |
| onSecondaryLongPress | GestureLongPressCallback | 辅助按钮长按时的回调函数 |
| onSecondaryLongPressStart | GestureLongPressStartCallback | 辅助按钮长按并开始拖动时的回调函数 |
| onSecondaryLongPressMoveUpdate | GestureLongPressMoveUpdateCallback | 辅助按钮长按并挪动时的回调函数 |
| onSecondaryLongPressUp | GestureLongPressUpCallback | 辅助按钮长按并松开时的回调函数 |
| onSecondaryLongPressEnd | GestureLongPressEndCallback | 辅助按钮长按完结拖动时的回调函数 |
三指触发手势
| 字段 | 属性 | 形容 |
|---|---|---|
| onTertiaryTapDown | GestureTapDownCallback | 三指按下时的回调函数 |
| onTertiaryTapUp | GestureTapUpCallback | 三指导击时的回调函数 |
| onTertiaryTapCancel | GestureTapCancelCallback | 三指勾销时的回调函数 |
| onTertiaryLongPressDown | GestureLongPressDownCallback | 三指按上来时的回调函数 |
| onTertiaryLongPressCancel | GestureLongPressCancelCallback | 三指长按勾销时的回调函数 |
| onTertiaryLongPress | GestureLongPressCallback | 三指长按时的回调函数 |
| onTertiaryLongPressStart | GestureLongPressStartCallback | 三指长按并开始拖动时的回调函数 |
| onTertiaryLongPressMoveUpdate | GestureLongPressMoveUpdateCallback | 三指长按并挪动时的回调函数 |
| onTertiaryLongPressUp | GestureLongPressUpCallback | 三指长按并松开时的回调函数 |
| onTertiaryLongPressEnd | GestureLongPressEndCallback | 三指长按完结拖动时的回调函数 |
其余属性
| 字段 | 属性 | 形容 |
|---|---|---|
| child | Widget | 子组件 |
| behavior | HitTestBehavior | 在命中测试期间如何体现 |
| excludeFromSemantics | bool | 是否从语义树中排除这些手势，默认false |
| dragStartBehavior | DragStartBehavior | 拖拽行为的解决形式 |
总结
咱们对GestureDetector的 单击、双击、长按、拖动、缩放 用案例来展现出他们的用法以及利用场景，还有其余如压力设施手势、辅助按钮、三指等手势对其属性进行了形容，手势是学Flutter必须把握的一个组件，能实现很多成果，如给容器增加手势、全局悬浮按钮、图片缩放等性能。