Flutter 手勢系列教程---GestureDetector

GestureDetector介紹

在前面的文章中我們介紹了Listener，而GestureDetector是對(duì)Listener的封裝，提供非常多的手勢,包括單擊、雙擊、拖動(dòng)、混合手勢等。

視頻教程地址

手勢系列視頻教程地址

什么情況下使用GestureDetector？

當(dāng)我們需要對(duì)文字需要增加點(diǎn)擊事件時(shí)，或者需要對(duì)組件進(jìn)行拖動(dòng)、縮放等那我們就可以借助GestureDetector

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

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

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

單擊手勢一般常用于給容器添加點(diǎn)擊事件

GestureDetector單擊手勢案例展示

我們?cè)?code>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單擊手勢控制臺(tái)輸出結(jié)果

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

GestureDetector雙擊手勢

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

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

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

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

GestureDetector雙擊手勢案例展示

我們?cè)?code>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雙擊手勢控制臺(tái)輸出結(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 手指按下去時(shí)的回調(diào)函數(shù)
onLongPressCancel GestureLongPressCancelCallback 手指長按取消時(shí)的回調(diào)函數(shù)
onLongPress GestureLongPressCallback 手指長按時(shí)的回調(diào)函數(shù)
onLongPressStart GestureLongPressStartCallback 手指長按并開始拖動(dòng)時(shí)的回調(diào)函數(shù)
onLongPressMoveUpdate GestureLongPressMoveUpdateCallback 手指長按并移動(dòng)時(shí)的回調(diào)函數(shù)
onLongPressUp GestureLongPressUpCallback 手指長按并松開時(shí)的回調(diào)函數(shù)
onLongPressEnd GestureLongPressEndCallback 手指長按結(jié)束拖動(dòng)時(shí)的回調(diào)函數(shù)

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

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

GestureDetector長按手勢案例展示

我們?cè)?code>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長按手勢控制臺(tái)輸出結(jié)果

第一種：單擊Container容器
flutter: onLongPressDown---Offset(199.0, 336.0)---Offset(111.5, 64.5)
flutter: onLongPressCancel
第二種：長按Container容器但是手指不動(dòng)后松開
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容器并進(jìn)行拖動(dòng)最后松開手指
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垂直滑動(dòng)手勢

垂直滑動(dòng)手勢總共有五種，分別如下：

字段 屬性 描述
onVerticalDragDown GestureDragDownCallback 手指按下時(shí)的回調(diào)函數(shù)
onVerticalDragStart GestureDragStartCallback 手指開始垂直滑動(dòng)時(shí)的回調(diào)函數(shù)
onVerticalDragUpdate GestureDragUpdateCallback 手指垂直滑動(dòng)時(shí)的回調(diào)函數(shù)
onVerticalDragEnd GestureDragEndCallback 手指垂直滑動(dòng)結(jié)束時(shí)的回調(diào)函數(shù)
onVerticalDragCancel GestureDragCancelCallback 手指垂直滑動(dòng)取消時(shí)的回調(diào)函數(shù)

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

需要對(duì)某個(gè)組件進(jìn)行垂直滑動(dòng)時(shí)

GestureDetector垂直滑動(dòng)手勢案例展示

我們?cè)?code>Container容器上添加了垂直滑動(dòng)手勢，代碼如下：

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垂直滑動(dòng)手勢控制臺(tái)輸出

第一種：點(diǎn)擊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
第二種：拖動(dòng)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
第三種：拖動(dòng)Container容器并馬上松開
flutter: onVerticalDragDown---Offset(10.5, 93.5)---Offset(10.5, 17.5)
flutter: onVerticalDragCancel

GestureDetector水平滑動(dòng)手勢

水平滑動(dòng)手勢總共有五種，分別如下：

字段 屬性 描述
onHorizontalDragDown GestureDragDownCallback 手指按下時(shí)的回調(diào)函數(shù)
onHorizontalDragStart GestureDragStartCallback 手指開始水平滑動(dòng)時(shí)的回調(diào)函數(shù)
onHorizontalDragUpdate GestureDragUpdateCallback 手指水平滑動(dòng)時(shí)的回調(diào)函數(shù)
onHorizontalDragEnd GestureDragEndCallback 手指水平滑動(dòng)結(jié)束時(shí)的回調(diào)函數(shù)
onHorizontalDragCancel GestureDragCancelCallback 手指水平滑動(dòng)取消時(shí)的回調(diào)函數(shù)

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

需要對(duì)某個(gè)組件進(jìn)行水平滑動(dòng)時(shí)

GestureDetector水平滑動(dòng)手勢案例展示

我們?cè)?code>Container容器上添加了水平滑動(dòng)手勢，代碼如下：

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: [
            /// 水平滑動(dòng)
            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水平滑動(dòng)控制臺(tái)輸出

第一種：點(diǎn)擊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
第二種：拖動(dòng)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
第三種：拖動(dòng)Container容器并馬上松開
flutter: onHorizontalDragDown---Offset(6.0, 109.0)---Offset(6.0, 33.0)
flutter: onHorizontalDragCancel

GestureDetector拖動(dòng)手勢

拖動(dòng)手勢總共有五種，分別如下：

字段 屬性 描述
onPanDown GestureDragDownCallback 手指按下時(shí)的回調(diào)函數(shù)
onPanStart GestureDragStartCallback 手指開始拖動(dòng)時(shí)的回調(diào)函數(shù)
onPanUpdate GestureDragUpdateCallback 手指移動(dòng)時(shí)的回調(diào)函數(shù)
onPanEnd GestureDragEndCallback 手指抬起時(shí)的回調(diào)函數(shù)
onPanCancel GestureDragCancelCallback 手指取消拖動(dòng)時(shí)的回調(diào)函數(shù)

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

如微信的全局懸浮按鈕

GestureDetector拖動(dòng)手勢案例展示

我們?cè)?code>Container容器上添加了拖動(dòng)手勢，代碼如下：

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

            // 拖動(dòng)手勢
            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拖動(dòng)手勢控制臺(tái)輸出

第一種：點(diǎn)擊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
第二種：拖動(dòng)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
第三種：拖動(dòng)Container容器并馬上松開
flutter: onPanDown---Offset(5.5, 162.5)---Offset(5.5, 86.5)
flutter: onPanCancel

GestureDetector縮放手勢

縮放手勢總共有三種，分別如下：

字段 屬性 描述
onScaleStart GestureScaleStartCallback 開始縮放時(shí)的回調(diào)函數(shù)
onScaleUpdate GestureScaleUpdateCallback 縮放移動(dòng)時(shí)的回調(diào)函數(shù)
onScaleEnd GestureScaleEndCallback 縮放結(jié)束時(shí)的回調(diào)函數(shù)

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

如查看圖片需要對(duì)圖片進(jìn)行縮小或放大時(shí)

GestureDetector縮放手勢案例展示

我們?cè)?code>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
                  ),
                ),
              ),
            )

          ],
        ),
      ),
    );
  }
}
第一種：點(diǎn)擊Container容器
flutter: onScaleStart---Offset(149.5, 348.0)---1
flutter: onScaleEnd---Velocity(0.0, 0.0)---0
第二種：單指拖動(dòng)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個(gè)手勢

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

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

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

三指觸發(fā)手勢

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

其他屬性

字段 屬性 描述
child Widget 子組件
behavior HitTestBehavior 在命中測試期間如何表現(xiàn)
excludeFromSemantics bool 是否從語義樹中排除這些手勢，默認(rèn)false
dragStartBehavior DragStartBehavior 拖拽行為的處理方式

總結(jié)

我們對(duì)GestureDetector的 單擊、雙擊、長按、拖動(dòng)、縮放 用案例來展示出他們的用法以及應(yīng)用場景，還有其他如壓力設(shè)備手勢、輔助按鈕、三指等手勢對(duì)其屬性進(jìn)行了描述，手勢是學(xué)Flutter必須掌握的一個(gè)組件，能實(shí)現(xiàn)很多效果，如給容器添加手勢、全局懸浮按鈕、圖片縮放等功能。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容