Flutter 手勢系列教程---GestureDetector

GestureDetector介紹

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

視頻教程地址

手勢系列視頻教程地址

什么情況下使用GestureDetector？

當我們需要對文字需要增加點擊事件時，或者需要對組件進行拖動、縮放等那我們就可以借助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 手指按下時的回調(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ù)

其他屬性

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

總結(jié)

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

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

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

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