Flutter 手势系列教程---GestureDetector

作者: Jimi | 来源:发表于2021-09-20 11:59 被阅读0次

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 手势系列教程---GestureDetector

GestureDetector介绍

视频教程地址

什么情况下使用GestureDetector？

GestureDetector构造函数

GestureDetector单击手势

GestureDetector单击手势应用场景

GestureDetector单击手势案例展示

GestureDetector单击手势控制台输出结果

第一种：点击Container容器

第二种：点击Container容器后不松手直接移出区域

GestureDetector双击手势

GestureDetector双击手势应用场景

GestureDetector双击手势案例展示

GestureDetector双击手势控制台输出结果

第一种：双击Container容器

第二种：双击Container容器但不抬起手指并移出区域

GestureDetector长按手势

GestureDetector长按手势应用场景

GestureDetector长按手势案例展示

GestureDetector长按手势控制台输出结果

第一种：单击Container容器

第二种：长按Container容器但是手指不动后松开

第三种：长按Container容器并进行拖动最后松开手指

第四种：长按Container容器并马上移出区域

GestureDetector垂直滑动手势

GestureDetector垂直滑动手势应用场景

GestureDetector垂直滑动手势案例展示

GestureDetector垂直滑动手势控制台输出

第一种：点击Container容器

第二种：拖动Container容器

第三种：拖动Container容器并马上松开

GestureDetector水平滑动手势

GestureDetector水平滑动手势应用场景

GestureDetector水平滑动手势案例展示

GestureDetector水平滑动控制台输出

第一种：点击Container容器

第二种：拖动Container容器

第三种：拖动Container容器并马上松开

GestureDetector拖动手势

GestureDetector拖动手势应用场景

GestureDetector拖动手势案例展示

GestureDetector拖动手势控制台输出

第一种：点击Container容器

第二种：拖动Container容器

第三种：拖动Container容器并马上松开

GestureDetector缩放手势

GestureDetector缩放手势应用场景

GestureDetector缩放手势案例展示

第一种：点击Container容器

第二种：单指拖动Container容器

第三种：双指缩放Container容器

GestureDetector其他手势

带有3D Touch功能压力设备触发手势

辅助按钮触发手势

三指触发手势

其他属性

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter