Flutter 手勢-GestureDetector

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

GestureDetector介紹

GestureDetector是對Listener的封裝完箩，提供非常多的手勢,包括單擊予借、雙擊、拖動、混合手勢等镜悉。

視頻教程地址

手勢系列視頻教程地址

使用GestureDetector

當我們需要對文字需要增加點擊事件時辉词，或者需要對組件進行拖動、縮放等那我們就可以借助GestureDetector

GestureDetector構(gòu)造函數(shù)

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       |手指按下時的回調(diào)函數(shù) |
| onTapUp        | GestureTapUpCallback            |手指松開時的回調(diào)函數(shù) |
| onTap             | GestureTapCallback                |手指點擊時的回調(diào)函數(shù) |
| onTapCancel  | GestureTapCancelCallback     |手指取消點擊時的回調(diào)函數(shù) |

##GestureDetector單擊手勢應(yīng)用場景
單擊手勢一般常用于給容器添加點擊事件

##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單擊手勢控制臺輸出結(jié)果

第一種：點擊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容器后不松手直接移出區(qū)域
flutter: onTapDown---Offset(195.5, 305.5)---Offset(108.0, 34.0)
flutter: onTapCancel

GestureDetector雙擊手勢

雙擊手勢總共有三種，分別如下：

字段 屬性 描述
onDoubleTapDown GestureTapDownCallback 手指按下時的回調(diào)函數(shù)
onDoubleTap GestureTapCallback 手指雙擊時的回調(diào)函數(shù)
onDoubleTapCancel GestureTapCancelCallback 手指取消時的回調(diào)函數(shù)

GestureDetector雙擊手勢應(yīng)用場景

在特定情況下需要對單一容器增加雙擊事件

GestureDetector雙擊手勢案例展示

我們在Container容器上添加了三種雙擊手勢的回調(diào)莺禁，代碼如下：

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雙擊手勢控制臺輸出結(jié)果

第一種：雙擊Container容器
flutter: onDoubleTapDown---Offset(204.5, 317.0)---Offset(117.0, 45.5)
flutter: onTapDown
第二種：雙擊Container容器但不抬起手指并移出區(qū)域
flutter: onDoubleTapDown---Offset(195.5, 283.5)---Offset(108.0, 12.0)
flutter: onDoubleTapCancel

GestureDetector長按手勢

長按手勢總共有七種留量，分別如下：

字段 屬性 描述
onLongPressDown GestureLongPressDownCallback 手指按下去時的回調(diào)函數(shù)
onLongPressCancel GestureLongPressCancelCallback 手指長按取消時的回調(diào)函數(shù)
onLongPress GestureLongPressCallback 手指長按時的回調(diào)函數(shù)
onLongPressStart GestureLongPressStartCallback 手指長按并開始拖動時的回調(diào)函數(shù)
onLongPressMoveUpdate GestureLongPressMoveUpdateCallback 手指長按并移動時的回調(diào)函數(shù)
onLongPressUp GestureLongPressUpCallback 手指長按并松開時的回調(diào)函數(shù)
onLongPressEnd GestureLongPressEndCallback 手指長按結(jié)束拖動時的回調(diào)函數(shù)

GestureDetector長按手勢應(yīng)用場景

長按某組件需要執(zhí)行特定的方法，比如按鈕長按時的水波紋效果

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長按手勢控制臺輸出結(jié)果

第一種：單擊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容器并馬上移出區(qū)域
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 手指按下時的回調(diào)函數(shù)
onVerticalDragStart GestureDragStartCallback 手指開始垂直滑動時的回調(diào)函數(shù)
onVerticalDragUpdate GestureDragUpdateCallback 手指垂直滑動時的回調(diào)函數(shù)
onVerticalDragEnd GestureDragEndCallback 手指垂直滑動結(jié)束時的回調(diào)函數(shù)
onVerticalDragCancel GestureDragCancelCallback 手指垂直滑動取消時的回調(diào)函數(shù)

GestureDetector垂直滑動手勢應(yīng)用場景

需要對某個組件進行垂直滑動時

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 手指按下時的回調(diào)函數(shù)
onHorizontalDragStart GestureDragStartCallback 手指開始水平滑動時的回調(diào)函數(shù)
onHorizontalDragUpdate GestureDragUpdateCallback 手指水平滑動時的回調(diào)函數(shù)
onHorizontalDragEnd GestureDragEndCallback 手指水平滑動結(jié)束時的回調(diào)函數(shù)
onHorizontalDragCancel GestureDragCancelCallback 手指水平滑動取消時的回調(diào)函數(shù)

GestureDetector水平滑動手勢應(yīng)用場景

需要對某個組件進行水平滑動時

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 手指按下時的回調(diào)函數(shù)
onPanStart GestureDragStartCallback 手指開始拖動時的回調(diào)函數(shù)
onPanUpdate GestureDragUpdateCallback 手指移動時的回調(diào)函數(shù)
onPanEnd GestureDragEndCallback 手指抬起時的回調(diào)函數(shù)
onPanCancel GestureDragCancelCallback 手指取消拖動時的回調(diào)函數(shù)

GestureDetector拖動手勢應(yīng)用場景

如微信的全局懸浮按鈕

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 開始縮放時的回調(diào)函數(shù)
onScaleUpdate GestureScaleUpdateCallback 縮放移動時的回調(diào)函數(shù)
onScaleEnd GestureScaleEndCallback 縮放結(jié)束時的回調(diào)函數(shù)

GestureDetector縮放手勢應(yīng)用場景

如查看圖片需要對圖片進行縮小或放大時

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功能壓力設(shè)備觸發(fā)手勢

總共有4個手勢

字段 屬性 描述
onForcePressStart GestureForcePressStartCallback 手指強制按下時的回調(diào)函數(shù)
onForcePressPeak GestureForcePressPeakCallback 手指按壓力度最大時的回調(diào)函數(shù)
onForcePressUpdate GestureForcePressUpdateCallback 手指按下后移動時的回調(diào)函數(shù)
onForcePressEnd GestureForcePressEndCallback 手指離開時的回調(diào)函數(shù)

輔助按鈕觸發(fā)手勢

字段 屬性 描述
onSecondaryTap GestureTapCallback 輔助按鈕單擊時的回調(diào)函數(shù)
onSecondaryTapDown GestureTapDownCallback 輔助按鈕按下時的回調(diào)函數(shù)
onSecondaryTapUp GestureTapUpCallback 輔助按鈕松開時的回調(diào)函數(shù)
onSecondaryTapCancel GestureTapCancelCallback 輔助按鈕取消點擊時的回調(diào)函數(shù)
onSecondaryLongPressDown GestureLongPressDownCallback 輔助按鈕按下去時的回調(diào)函數(shù)
onSecondaryLongPressCancel GestureLongPressCancelCallback 輔助按鈕長按取消時的回調(diào)函數(shù)
onSecondaryLongPress GestureLongPressCallback 輔助按鈕長按時的回調(diào)函數(shù)
onSecondaryLongPressStart GestureLongPressStartCallback 輔助按鈕長按并開始拖動時的回調(diào)函數(shù)
onSecondaryLongPressMoveUpdate GestureLongPressMoveUpdateCallback 輔助按鈕長按并移動時的回調(diào)函數(shù)
onSecondaryLongPressUp GestureLongPressUpCallback 輔助按鈕長按并松開時的回調(diào)函數(shù)
onSecondaryLongPressEnd GestureLongPressEndCallback 輔助按鈕長按結(jié)束拖動時的回調(diào)函數(shù)

三指觸發(fā)手勢

字段 屬性 描述
onTertiaryTapDown GestureTapDownCallback 三指按下時的回調(diào)函數(shù)
onTertiaryTapUp GestureTapUpCallback 三指點擊時的回調(diào)函數(shù)
onTertiaryTapCancel GestureTapCancelCallback 三指取消時的回調(diào)函數(shù)
onTertiaryLongPressDown GestureLongPressDownCallback 三指按下去時的回調(diào)函數(shù)
onTertiaryLongPressCancel GestureLongPressCancelCallback 三指長按取消時的回調(diào)函數(shù)
onTertiaryLongPress GestureLongPressCallback 三指長按時的回調(diào)函數(shù)
onTertiaryLongPressStart GestureLongPressStartCallback 三指長按并開始拖動時的回調(diào)函數(shù)
onTertiaryLongPressMoveUpdate GestureLongPressMoveUpdateCallback 三指長按并移動時的回調(diào)函數(shù)
onTertiaryLongPressUp GestureLongPressUpCallback 三指長按并松開時的回調(diào)函數(shù)
onTertiaryLongPressEnd GestureLongPressEndCallback 三指長按結(jié)束拖動時的回調(diào)函數(shù)

總結(jié)

我們對GestureDetector的 單擊纸淮、雙擊平斩、長按、拖動咽块、縮放 用案例來展示出他們的用法以及應(yīng)用場景绘面，還有其他如壓力設(shè)備手勢、輔助按鈕侈沪、三指等手勢對其屬性進行了描述揭璃，手勢是學(xué)Flutter必須掌握的一個組件，能實現(xiàn)很多效果峭竣，如給容器添加手勢塘辅、全局懸浮按鈕、圖片縮放等功能皆撩。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末扣墩，一起剝皮案震驚了整個濱河市哲银，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌呻惕，老刑警劉巖荆责，帶你破解...
    沈念sama閱讀 222,464評論 6贊 517
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異亚脆，居然都是意外死亡做院，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門濒持，熙熙樓的掌柜王于貴愁眉苦臉地迎上來键耕，“玉大人，你說我怎么就攤上這事柑营∏郏” “怎么了？”我有些...
    開封第一講書人閱讀 169,078評論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵官套，是天一觀的道長酒奶。 經(jīng)常有香客問我，道長奶赔，這世上最難降的妖魔是什么惋嚎？ 我笑而不...
    開封第一講書人閱讀 59,979評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮站刑，結(jié)果婚禮上另伍，老公的妹妹穿的比我還像新娘。我一直安慰自己笛钝，他們只是感情好质况，可當我...
    茶點故事閱讀 69,001評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著玻靡，像睡著了一般结榄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上囤捻，一...
    開封第一講書人閱讀 52,584評論 1贊 312
  • 城市分裂傳說
    那天臼朗，我揣著相機與錄音，去河邊找鬼蝎土。 笑死视哑，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的誊涯。 我是一名探鬼主播挡毅，決...
    沈念sama閱讀 41,085評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼暴构！你這毒婦竟也來了跪呈？” 一聲冷哼從身側(cè)響起段磨，我...
    開封第一講書人閱讀 40,023評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎耗绿，沒想到半個月后苹支，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,555評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡误阻，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年债蜜，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片究反。...
    茶點故事閱讀 40,769評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡寻定，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出奴紧，到底是詐尸還是另有隱情特姐，我是刑警寧澤，帶...
    沈念sama閱讀 36,439評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布黍氮，位于F島的核電站，受9級特大地震影響浅浮，放射性物質(zhì)發(fā)生泄漏沫浆。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一滚秩、第九天 我趴在偏房一處隱蔽的房頂上張望专执。 院中可真熱鬧，春花似錦郁油、人聲如沸本股。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0贊 25
  • 一樁弒父案桐腌，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽拄显。三九已至，卻和暖如春案站，著一層夾襖步出監(jiān)牢的瞬間躬审，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工蟆盐， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留承边，地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3贊 378
  • 代替公主和親
    正文 我出身青樓石挂，卻偏偏與公主長得像博助，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子痹愚，可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2贊 361

推薦閱讀更多精彩內(nèi)容