Flutter 手势系列教程---GestureDetector

·  阅读 291
Flutter 手势系列教程---GestureDetector

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单击手势

单击手势总共有四种,分别如下:

字段属性描述
onTapDownGestureTapDownCallback手指按下时的回调函数
onTapUpGestureTapUpCallback手指松开时的回调函数
onTapGestureTapCallback手指点击时的回调函数
onTapCancelGestureTapCancelCallback手指取消点击时的回调函数

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双击手势

双击手势总共有三种,分别如下:

字段属性描述
onDoubleTapDownGestureTapDownCallback手指按下时的回调函数
onDoubleTapGestureTapCallback手指双击时的回调函数
onDoubleTapCancelGestureTapCancelCallback手指取消时的回调函数

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长按手势

长按手势总共有七种,分别如下:

字段属性描述
onLongPressDownGestureLongPressDownCallback手指按下去时的回调函数
onLongPressCancelGestureLongPressCancelCallback手指长按取消时的回调函数
onLongPressGestureLongPressCallback手指长按时的回调函数
onLongPressStartGestureLongPressStartCallback手指长按并开始拖动时的回调函数
onLongPressMoveUpdateGestureLongPressMoveUpdateCallback手指长按并移动时的回调函数
onLongPressUpGestureLongPressUpCallback手指长按并松开时的回调函数
onLongPressEndGestureLongPressEndCallback手指长按结束拖动时的回调函数

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垂直滑动手势

垂直滑动手势总共有五种,分别如下:

字段属性描述
onVerticalDragDownGestureDragDownCallback手指按下时的回调函数
onVerticalDragStartGestureDragStartCallback手指开始垂直滑动时的回调函数
onVerticalDragUpdateGestureDragUpdateCallback手指垂直滑动时的回调函数
onVerticalDragEndGestureDragEndCallback手指垂直滑动结束时的回调函数
onVerticalDragCancelGestureDragCancelCallback手指垂直滑动取消时的回调函数

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水平滑动手势

水平滑动手势总共有五种,分别如下:

字段属性描述
onHorizontalDragDownGestureDragDownCallback手指按下时的回调函数
onHorizontalDragStartGestureDragStartCallback手指开始水平滑动时的回调函数
onHorizontalDragUpdateGestureDragUpdateCallback手指水平滑动时的回调函数
onHorizontalDragEndGestureDragEndCallback手指水平滑动结束时的回调函数
onHorizontalDragCancelGestureDragCancelCallback手指水平滑动取消时的回调函数

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拖动手势

拖动手势总共有五种,分别如下:

字段属性描述
onPanDownGestureDragDownCallback手指按下时的回调函数
onPanStartGestureDragStartCallback手指开始拖动时的回调函数
onPanUpdateGestureDragUpdateCallback手指移动时的回调函数
onPanEndGestureDragEndCallback手指抬起时的回调函数
onPanCancelGestureDragCancelCallback手指取消拖动时的回调函数

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缩放手势

缩放手势总共有三种,分别如下:

字段属性描述
onScaleStartGestureScaleStartCallback开始缩放时的回调函数
onScaleUpdateGestureScaleUpdateCallback缩放移动时的回调函数
onScaleEndGestureScaleEndCallback缩放结束时的回调函数

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个手势

字段属性描述
onForcePressStartGestureForcePressStartCallback手指强制按下时的回调函数
onForcePressPeakGestureForcePressPeakCallback手指按压力度最大时的回调函数
onForcePressUpdateGestureForcePressUpdateCallback手指按下后移动时的回调函数
onForcePressEndGestureForcePressEndCallback手指离开时的回调函数

辅助按钮触发手势

字段属性描述
onSecondaryTapGestureTapCallback辅助按钮单击时的回调函数
onSecondaryTapDownGestureTapDownCallback辅助按钮按下时的回调函数
onSecondaryTapUpGestureTapUpCallback辅助按钮松开时的回调函数
onSecondaryTapCancelGestureTapCancelCallback辅助按钮取消点击时的回调函数
onSecondaryLongPressDownGestureLongPressDownCallback辅助按钮按下去时的回调函数
onSecondaryLongPressCancelGestureLongPressCancelCallback辅助按钮长按取消时的回调函数
onSecondaryLongPressGestureLongPressCallback辅助按钮长按时的回调函数
onSecondaryLongPressStartGestureLongPressStartCallback辅助按钮长按并开始拖动时的回调函数
onSecondaryLongPressMoveUpdateGestureLongPressMoveUpdateCallback辅助按钮长按并移动时的回调函数
onSecondaryLongPressUpGestureLongPressUpCallback辅助按钮长按并松开时的回调函数
onSecondaryLongPressEndGestureLongPressEndCallback辅助按钮长按结束拖动时的回调函数

三指触发手势

字段属性描述
onTertiaryTapDownGestureTapDownCallback三指按下时的回调函数
onTertiaryTapUpGestureTapUpCallback三指点击时的回调函数
onTertiaryTapCancelGestureTapCancelCallback三指取消时的回调函数
onTertiaryLongPressDownGestureLongPressDownCallback三指按下去时的回调函数
onTertiaryLongPressCancelGestureLongPressCancelCallback三指长按取消时的回调函数
onTertiaryLongPressGestureLongPressCallback三指长按时的回调函数
onTertiaryLongPressStartGestureLongPressStartCallback三指长按并开始拖动时的回调函数
onTertiaryLongPressMoveUpdateGestureLongPressMoveUpdateCallback三指长按并移动时的回调函数
onTertiaryLongPressUpGestureLongPressUpCallback三指长按并松开时的回调函数
onTertiaryLongPressEndGestureLongPressEndCallback三指长按结束拖动时的回调函数

其他属性

字段属性描述
childWidget子组件
behaviorHitTestBehavior在命中测试期间如何表现
excludeFromSemanticsbool是否从语义树中排除这些手势,默认false
dragStartBehaviorDragStartBehavior拖拽行为的处理方式

总结

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

分类:
前端
标签:
分类:
前端
标签: