关于flutter:Flutter-手势系列教程GestureDetector

34次阅读

共计 20651 个字符，预计需要花费 52 分钟才能阅读完成。

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: 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<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: 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<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: 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<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: 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<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: 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<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: 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<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)---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 三指长按完结拖动时的回调函数

其余属性

字段 属性 形容
child Widget 子组件
behavior HitTestBehavior 在命中测试期间如何体现
excludeFromSemantics bool 是否从语义树中排除这些手势，默认 false
dragStartBehavior DragStartBehavior 拖拽行为的解决形式

总结

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

正文完
flutter
发表至： flutter
2021-09-20
 0
关于flutter:Flutter-开发从-0-到-1五源码
关于flutter:flutter-交互式用户指导以及如何在布局中创造一个洞
关于flutter:Flutter-Matrix4矩阵动画实现移动缩放旋转让你的纸飞机沿着贝塞尔曲线轨迹飞起来
关于flutter:老孟FlutterFlutter-中与平台相关的生命周期