Flutter 手势-GestureDetector

出处：https://segmentfault.com/a/1190000040711667

GestureDetector介绍

GestureDetector是对Listener的封装，提供非常多的手势,包括单击、双击、拖动、混合手势等。

视频教程地址

手势系列视频教程地址

使用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([
               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 {

  @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: onTapCancel

GestureDetector双击手势

双击手势总共有三种，分别如下：

字段	属性	描述
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 {

  @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: onDoubleTapCancel

GestureDetector长按手势

长按手势总共有七种，分别如下：

字段	属性	描述
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 {

  @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: onLongPress
flutter: 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: onLongPress
flutter: 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: onLongPressCancel
flutter: onLongPressDown---Offset(91.5, 275.5)---Offset(4.0, 4.0)
flutter: onLongPressCancel

GestureDetector垂直滑动手势

垂直滑动手势总共有五种，分别如下：

字段	属性	描述
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 {

  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: onVerticalDragCancel

GestureDetector水平滑动手势

水平滑动手势总共有五种，分别如下：

字段	属性	描述
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 {

  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: onHorizontalDragCancel

GestureDetector拖动手势

拖动手势总共有五种，分别如下：

字段	属性	描述
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 {

  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: onPanCancel

GestureDetector缩放手势

缩放手势总共有三种，分别如下：

字段	属性	描述
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 {

  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)---1
flutter: onScaleEnd---Velocity(0.0, 0.0)---0

第二种：单指拖动Container容器

flutter: onScaleStart---Offset(178.0, 304.5)---1
flutter: onScaleUpdate---1.0---1.0
flutter: onScaleUpdate---1.0---1.0
flutter: onScaleUpdate---1.0---1.0
flutter: onScaleUpdate---1.0---1.0
flutter: onScaleEnd---Velocity(0.0, 0.0)---0

第三种：双指缩放Container容器

flutter: onScaleStart---Offset(187.5, 333.5)---2
flutter: onScaleUpdate---1.0055027720002572---1.0055027720002572
flutter: onScaleUpdate---1.0110087715145855---1.0110087715145855
flutter: onScaleUpdate---1.0293231946761667---1.0293231946761667
flutter: onScaleUpdate---1.04763763435052---1.04763763435052
flutter: onScaleUpdate---1.0531463022961167---1.0531463022961167
flutter: onScaleEnd---Velocity(0.0, 0.0)---1

GestureDetector其他手势

带有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	三指长按结束拖动时的回调函数

总结

我们对GestureDetector的 单击、双击、长按、拖动、缩放 用案例来展示出他们的用法以及应用场景，还有其他如压力设备手势、辅助按钮、三指等手势对其属性进行了描述，手势是学Flutter必须掌握的一个组件，能实现很多效果，如给容器添加手势、全局悬浮按钮、图片缩放等功能。