首页 > 其他分享 >Flutter手势组件（3）：GestureDetector

Flutter手势组件（3）：GestureDetector

时间：2024-11-20 13:39:48浏览次数：1  
标签：GestureDetector Flutter --- details Offset 组件 Container flutter

一、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.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,
  })
  // ......

四、GestureDetector单击手势

应用场景：单击手势一般常用于给容器添加点击事件。

单击手势总共有四种，分别如下：

字段 属性 描述
onTapDown GestureTapDownCallback 手指按下时的回调函数
onTapUp GestureTapUpCallback 手指松开时的回调函数
onTap GestureTapCallback 手指点击时的回调函数
onTapCancel GestureTapCancelCallback 手指取消点击时的回调函数

我们在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("Misaka",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_C.png


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

  • 第一种：点击Container容器：
flutter: onTapDown---Offset(211.5, 317.0)---Offset(124.0, 45.5)
flutter: onTapUp---Offset(211.5, 317.0)---Offset(124.0, 45.5)
flutter: onTap
  • 第二种：点击Container容器后不松手直接移出区域：
flutter: onTapDown---Offset(195.5, 305.5)---Offset(108.0, 34.0)
flutter: onTapCancel

五、GestureDetector双击手势

应用场景：在特定情况下需要对单一容器增加双击事件。

双击手势总共有三种，分别如下：

字段 属性 描述
onDoubleTapDown GestureTapDownCallback 手指按下时的回调函数
onDoubleTap GestureTapCallback 手指双击时的回调函数
onDoubleTapCancel GestureTapCancelCallback 手指取消时的回调函数

我们在Container容器上添加了三种双击手势的回调，代码如下：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetectorExample(),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  const GestureDetectorExample({super.key});   
  @override
  State<GestureDetectorExample> 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: () {
                debugPrint("onTapDown");
              },
              onDoubleTapCancel: () {
                debugPrint("onDoubleTapCancel");
              },
              onDoubleTapDown: (details) {
                debugPrint("onDoubleTapDown---${details.globalPosition}---${details.localPosition}");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text("Misaka",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 30
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_C.png


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

  • 第一种：双击Container容器：
flutter: onDoubleTapDown---Offset(204.5, 317.0)---Offset(117.0, 45.5)
flutter: onTapDown
  • 第二种：双击Container容器但不抬起手指并移出区域：
flutter: onDoubleTapDown---Offset(195.5, 283.5)---Offset(108.0, 12.0)
flutter: onDoubleTapCancel

六、GestureDetector长按手势

应用场景：长按某组件需要执行特定的方法，比如按钮长按时的水波纹效果。

长按手势总共有七种，分别如下：

字段 属性 描述
onLongPressDown GestureLongPressDownCallback 手指按下去时的回调函数
onLongPressCancel GestureLongPressCancelCallback 手指长按取消时的回调函数
onLongPress GestureLongPressCallback 手指长按时的回调函数
onLongPressStart GestureLongPressStartCallback 手指长按并开始拖动时的回调函数
onLongPressMoveUpdate GestureLongPressMoveUpdateCallback 手指长按并移动时的回调函数
onLongPressUp GestureLongPressUpCallback 手指长按并松开时的回调函数
onLongPressEnd GestureLongPressEndCallback 手指长按结束拖动时的回调函数

我们在Container容器上添加了长按手势，代码如下：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetectorExample(),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  const GestureDetectorExample({super.key});   
  @override
  State<GestureDetectorExample> 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: (){
                debugPrint("onLongPress");
              },
              onLongPressCancel: () {
                debugPrint("onLongPressCancel");
              },
              onLongPressUp: () {
                debugPrint("onLongPressUp");
              },
              onLongPressDown: (details) {
                debugPrint("onLongPressDown---${details.globalPosition}---${details.localPosition}");
              },
              onLongPressEnd: (details) {
                debugPrint("onLongPressEnd---${details.globalPosition}---${details.localPosition}");
              },
              onLongPressStart: (details) {
                debugPrint("onLongPressStart---${details.globalPosition}---${details.localPosition}");
              },
              onLongPressMoveUpdate: (details) {
                debugPrint("onLongPressMoveUpdate---${details.globalPosition}---${details.localPosition}");
              },
              child: Container(
                width: 200,
                height: 200,
                color: Colors.orange,
                alignment: Alignment.center,
                child: Text("Misaka",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_C.png


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

  • 第一种：单击Container容器：
flutter: onLongPressDown---Offset(199.0, 336.0)---Offset(111.5, 64.5)
flutter: onLongPressCancel
  • 第二种：长按Container容器但是手指不动后松开：
flutter: onLongPressDown---Offset(215.0, 301.0)---Offset(127.5, 29.5)
flutter: onLongPressStart---Offset(215.0, 301.0)---Offset(127.5, 29.5)
flutter: onLongPress
flutter: onLongPressEnd---Offset(215.0, 301.0)---Offset(127.5, 29.5)
flutter: onLongPressUp
  • 第三种：长按Container容器并进行拖动最后松开手指：
flutter: onLongPressDown---Offset(169.0, 314.0)---Offset(81.5, 42.5)
flutter: onLongPressStart---Offset(169.0, 314.0)---Offset(81.5, 42.5)
flutter: onLongPress
flutter: onLongPressMoveUpdate---Offset(168.5, 314.5)---Offset(81.0, 43.0)
flutter: onLongPressMoveUpdate---Offset(165.0, 318.5)---Offset(77.5, 47.0)
flutter: onLongPressMoveUpdate---Offset(164.0, 319.0)---Offset(76.5, 47.5)
flutter: onLongPressMoveUpdate---Offset(158.5, 323.5)---Offset(71.0, 52.0)
flutter: onLongPressMoveUpdate---Offset(153.0, 329.5)---Offset(65.5, 58.0)
flutter: onLongPressMoveUpdate---Offset(148.5, 335.0)---Offset(61.0, 63.5)
flutter: onLongPressMoveUpdate---Offset(146.5, 339.0)---Offset(59.0, 67.5)
flutter: onLongPressMoveUpdate---Offset(146.5, 339.5)---Offset(59.0, 68.0)
flutter: onLongPressEnd---Offset(146.5, 339.5)---Offset(59.0, 68.0)
flutter: onLongPressUp
  • 第四种：长按Container容器并马上移出区域：
flutter: onLongPressDown---Offset(97.0, 277.5)---Offset(9.5, 6.0)
flutter: onLongPressCancel
flutter: onLongPressDown---Offset(91.5, 275.5)---Offset(4.0, 4.0)
flutter: onLongPressCancel

七、GestureDetector垂直滑动手势

应用场景：需要对某个组件进行垂直滑动时

垂直滑动手势总共有五种，分别如下：

字段 属性 描述
onVerticalDragDown GestureDragDownCallback 手指按下时的回调函数
onVerticalDragStart GestureDragStartCallback 手指开始垂直滑动时的回调函数
onVerticalDragUpdate GestureDragUpdateCallback 手指垂直滑动时的回调函数
onVerticalDragEnd GestureDragEndCallback 手指垂直滑动结束时的回调函数
onVerticalDragCancel GestureDragCancelCallback 手指垂直滑动取消时的回调函数

我们在Container容器上添加了垂直滑动手势，代码如下：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetectorExample(),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  const GestureDetectorExample({super.key});   
  @override
  State<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  final 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: () {
                debugPrint("onVerticalDragCancel");
              },
              onVerticalDragDown: (details) {
                debugPrint("onVerticalDragDown---${details.globalPosition}---${details.localPosition}");
              },
              onVerticalDragEnd: (details) {
                debugPrint("onVerticalDragEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onVerticalDragStart: (details) {
                debugPrint("onVerticalDragStart---${details.globalPosition}---${details.localPosition}");
              },
              onVerticalDragUpdate: (details) {
                debugPrint("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("Misaka",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_D.png


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

  • 第一种：点击Container容器：
flutter: onVerticalDragDown---Offset(76.5, 114.5)---Offset(76.5, 38.5)
flutter: onVerticalDragStart---Offset(76.5, 114.5)---Offset(76.5, 38.5)
flutter: onVerticalDragEnd---Velocity(0.0, 0.0)---0.0
  • 第二种：拖动Container容器：
flutter: onVerticalDragDown---Offset(185.5, 332.5)---Offset(185.5, 256.5)
flutter: onVerticalDragStart---Offset(185.5, 332.5)---Offset(185.5, 256.5)
flutter: onVerticalDragUpdate---Offset(185.5, 332.0)---Offset(185.5, 256.0)
flutter: onVerticalDragUpdate---Offset(187.5, 322.0)---Offset(187.5, 246.0)
flutter: onVerticalDragUpdate---Offset(192.0, 307.0)---Offset(192.0, 231.0)
flutter: onVerticalDragUpdate---Offset(193.5, 298.0)---Offset(193.5, 222.0)
flutter: onVerticalDragUpdate---Offset(193.5, 297.0)---Offset(193.5, 221.0)
flutter: onVerticalDragEnd---Velocity(131.3, -548.9)----548.8773895303548
  • 第三种：拖动Container容器并马上松开：
flutter: onVerticalDragDown---Offset(10.5, 93.5)---Offset(10.5, 17.5)
flutter: onVerticalDragCancel

八、GestureDetector水平滑动手势

应用场景：需要对某个组件进行水平滑动时

水平滑动手势总共有五种，分别如下：

字段 属性 描述
onHorizontalDragDown GestureDragDownCallback 手指按下时的回调函数
onHorizontalDragStart GestureDragStartCallback 手指开始水平滑动时的回调函数
onHorizontalDragUpdate GestureDragUpdateCallback 手指水平滑动时的回调函数
onHorizontalDragEnd GestureDragEndCallback 手指水平滑动结束时的回调函数
onHorizontalDragCancel GestureDragCancelCallback 手指水平滑动取消时的回调函数

我们在Container容器上添加了水平滑动手势，代码如下：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetectorExample(),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  const GestureDetectorExample({super.key});   
  @override
  State<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}

class _GestureDetectorExampleState extends State<GestureDetectorExample> {

  double _left = 0;
  final double _top = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GestureDetector"),
      ),
      body: Center(
        child: Stack(
          children: [
            // 水平滑动
            GestureDetector(
              onHorizontalDragCancel: () {
                debugPrint("onHorizontalDragCancel");
              },
              onHorizontalDragDown: (details) {
                debugPrint("onHorizontalDragDown---${details.globalPosition}---${details.localPosition}");
              },
              onHorizontalDragEnd: (details) {
                debugPrint("onHorizontalDragEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onHorizontalDragStart: (details) {
                debugPrint("onHorizontalDragStart---${details.globalPosition}---${details.localPosition}");
              },
              onHorizontalDragUpdate: (details) {
                debugPrint("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("Misaka",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )

          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_D.png


GestureDetector 水平滑动手势控制台输出结果：

  • 第一种：点击Container容器：
flutter: onHorizontalDragDown---Offset(151.5, 118.0)---Offset(151.5, 42.0)
flutter: onHorizontalDragStart---Offset(151.5, 118.0)---Offset(151.5, 42.0)
flutter: onHorizontalDragEnd---Velocity(0.0, 0.0)---0.0
  • 第二种：拖动Container容器：
flutter: onHorizontalDragDown---Offset(97.5, 135.5)---Offset(97.5, 59.5)
flutter: onHorizontalDragStart---Offset(97.5, 135.5)---Offset(97.5, 59.5)
flutter: onHorizontalDragUpdate---Offset(100.0, 136.0)---Offset(100.0, 60.0)---Offset(2.5, 0.0)
flutter: onHorizontalDragUpdate---Offset(100.5, 136.0)---Offset(100.5, 60.0)---Offset(0.5, 0.0)
flutter: onHorizontalDragUpdate---Offset(102.0, 136.0)---Offset(102.0, 60.0)---Offset(1.5, 0.0)
flutter: onHorizontalDragUpdate---Offset(105.0, 136.5)---Offset(105.0, 60.5)---Offset(3.0, 0.0)
flutter: onHorizontalDragUpdate---Offset(107.0, 137.0)---Offset(107.0, 61.0)---Offset(2.0, 0.0)
flutter: onHorizontalDragUpdate---Offset(108.5, 137.0)---Offset(108.5, 61.0)---Offset(1.5, 0.0)
flutter: onHorizontalDragUpdate---Offset(109.0, 137.0)---Offset(109.0, 61.0)---Offset(0.5, 0.0)
flutter: onHorizontalDragUpdate---Offset(110.0, 137.0)---Offset(110.0, 61.0)---Offset(1.0, 0.0)
flutter: onHorizontalDragUpdate---Offset(111.0, 137.0)---Offset(111.0, 61.0)---Offset(1.0, 0.0)
flutter: onHorizontalDragEnd---Velocity(0.0, 0.0)---0.0
  • 第三种：拖动Container容器并马上松开：
flutter: onHorizontalDragDown---Offset(6.0, 109.0)---Offset(6.0, 33.0)
flutter: onHorizontalDragCancel

九、GestureDetector拖动手势

应用场景：如微信的全局悬浮按钮

拖动手势总共有五种，分别如下：

字段 属性 描述
onPanDown GestureDragDownCallback 手指按下时的回调函数
onPanStart GestureDragStartCallback 手指开始拖动时的回调函数
onPanUpdate GestureDragUpdateCallback 手指移动时的回调函数
onPanEnd GestureDragEndCallback 手指抬起时的回调函数
onPanCancel GestureDragCancelCallback 手指取消拖动时的回调函数

我们在Container容器上添加了拖动手势，代码如下：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetectorExample(),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  const GestureDetectorExample({super.key});   
  @override
  State<GestureDetectorExample> 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: () {
                debugPrint("onPanCancel");
              },
              onPanDown: (details) {
                debugPrint("onPanDown---${details.globalPosition}---${details.localPosition}");
              },
              onPanEnd: (details) {
                debugPrint("onPanEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onPanStart: (details) {
                debugPrint("onPanStart---${details.globalPosition}---${details.localPosition}");
              },
              onPanUpdate: (details) {
                debugPrint("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("Misaka",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_D.png


GestureDetector 拖动手势控制台输出结果：

  • 第一种：点击Container容器：
flutter: onPanDown---Offset(161.0, 233.0)---Offset(161.0, 157.0)
flutter: onPanStart---Offset(161.0, 233.0)---Offset(161.0, 157.0)
flutter: onPanEnd---Velocity(0.0, 0.0)---0.0
  • 第二种：拖动Container容器：
flutter: onPanDown---Offset(123.5, 193.5)---Offset(123.5, 117.5)
flutter: onPanStart---Offset(123.5, 193.5)---Offset(123.5, 117.5)
flutter: onPanUpdate---Offset(123.5, 193.0)---Offset(123.5, 117.0)---Offset(0.0, -0.5)
flutter: onPanUpdate---Offset(124.0, 193.0)---Offset(124.0, 117.0)---Offset(0.5, 0.0)
flutter: onPanUpdate---Offset(124.5, 192.0)---Offset(124.5, 116.0)---Offset(0.5, -1.0)
flutter: onPanUpdate---Offset(125.5, 190.5)---Offset(125.5, 114.5)---Offset(1.0, -1.5)
flutter: onPanUpdate---Offset(126.0, 190.0)---Offset(126.0, 114.0)---Offset(0.5, -0.5)
flutter: onPanUpdate---Offset(126.5, 189.5)---Offset(126.5, 113.5)---Offset(0.5, -0.5)
flutter: onPanUpdate---Offset(127.0, 189.0)---Offset(127.0, 113.0)---Offset(0.5, -0.5)
flutter: onPanEnd---Velocity(0.0, 0.0)---0.0
  • 第三种：拖动Container容器并马上松开：
flutter: onPanDown---Offset(5.5, 162.5)---Offset(5.5, 86.5)
flutter: onPanCancel

十、GestureDetector缩放手势

应用场景：如查看图片需要对图片进行缩小或放大时

缩放手势总共有三种，分别如下：

字段 属性 描述
onScaleStart GestureScaleStartCallback 开始缩放时的回调函数
onScaleUpdate GestureScaleUpdateCallback 缩放移动时的回调函数
onScaleEnd GestureScaleEndCallback 缩放结束时的回调函数

我们在Container容器上添加了缩放手势，代码如下：

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetectorExample(),
    );
  }
}

class GestureDetectorExample extends StatefulWidget {
  const GestureDetectorExample({super.key});   
  @override
  State<GestureDetectorExample> 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: () {
                debugPrint("onPanCancel");
              },
              onPanDown: (details) {
                debugPrint("onPanDown---${details.globalPosition}---${details.localPosition}");
              },
              onPanEnd: (details) {
                debugPrint("onPanEnd---${details.velocity}---${details.primaryVelocity}");
              },
              onPanStart: (details) {
                debugPrint("onPanStart---${details.globalPosition}---${details.localPosition}");
              },
              onPanUpdate: (details) {
                debugPrint("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("Misaka",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 30
                        ),
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下所示：

Flutter_event_C.png


GestureDetector 缩放手势控制台输出结果：

  • 第一种：点击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功能压力设备触发手势

字段 属性 描述
onForcePressStart GestureForcePressStartCallback 手指强制按下时的回调函数
onForcePressPeak GestureForcePressPeakCallback 手指按压力度最大时的回调函数
onForcePressUpdate GestureForcePressUpdateCallback 手指按下后移动时的回调函数
onForcePressEnd GestureForcePressEndCallback 手指离开时的回调函数

辅助按钮触发手势

字段 属性 描述
onSecondaryTap GestureTapCallback 辅助按钮单击时的回调函数
onSecondaryTapDown GestureTapDownCallback 辅助按钮按下时的回调函数
onSecondaryTapUp GestureTapUpCallback 辅助按钮松开时的回调函数
onSecondaryTapCancel GestureTapCancelCallback 辅助按钮取消点击时的回调函数

三指触发手势

字段 属性 描述
onTertiaryTapDown GestureTapDownCallback 三指按下时的回调函数
onTertiaryTapUp GestureTapUpCallback 三指点击时的回调函数
onTertiaryTapCancel GestureTapCancelCallback 三指取消时的回调函数
onTertiaryLongPressDown GestureLongPressDownCallback 三指按下去时的回调函数

其他属性

字段 属性 描述
child Widget 子组件
behavior HitTestBehavior 在命中测试期间如何表现
excludeFromSemantics bool 是否从语义树中排除这些手势，默认false
dragStartBehavior DragStartBehavior 拖拽行为的处理方式

十二、总结

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


标签：GestureDetector,Flutter,---,details,Offset,组件,Container,flutter
From： https://www.cnblogs.com/linuxAndMcu/p/18556709

相关文章

  • uniapp项目清理工具：自动查找未使用的组件和资源文件
    uniapp项目清理工具：自动查找未使用的组件和资源文件前言在开发uniapp项目的过程中，随着项目规模的增长，经常会遇到一些组件和资源文件（图片、音频等）不再使用但仍然保留在项目中的情况。这些无用文件不仅占用存储空间，还会影响项目的维护性。为了解决这个问题，我开发了两个No......
  • Vue前端开发子组件向父组件传参
    在父组件中，如果需要获取子组件中的数据，有两种方式，一种是在子组件中自定义事件，父组件绑定该事件，当触发自定义事件时，向父组件传入参数;另一种是先通过ref属性给子组件命名，然后在父组件中就可以调用$refs对象，访问命名的子组件中数据。子组件自定义事件传参父组件通过绑定子组......
  • Flutter 扫描二维码
    在今天的移动开发中，二维码扫描已经成为了常见的功能之一。Flutter作为一款跨平台的开发框架，提供了丰富的插件和功能，使得开发者可以轻松实现二维码扫描以及图像识别功能。本文将介绍如何在Flutter中通过结合 scan 插件、permission_handler 插件以及 image_picker 插件，实现......
  • Unity新导航系统---NavMeshObstacle组件
    系列文章目录Unity新导航系统—NavMeshObstacle组件文章目录系列文章目录前言NavMeshObstacle组件前言NavMeshObstacle组件：用于在场景中定义动态障碍物，来影响导航主体(NavMeshAgent)的路径选择。这是我的学习笔记，记载的是NavMeshObstacle组件的用法和各......
  • Vue.js组件开发指南
    Vue.js组件开发涵盖多方面内容。从基础层面看，组件作为可复用的Vue实例，能通过多种方式注册，其props用于接收外部数据、data需为函数以保障数据独立。生命周期的各个钩子函数在组件不同阶段发挥作用。组件通信包括父子间的特定方式和非父子间利用事件总线。样式方面有作用域样......
  • React 组件中 State 的定义、使用及正确更新方式
    ​......
  • 尤雨溪都在推荐的Naive UI，Vue组件库的新选择，好用到爆！
    大家好，欢迎来到程序视点！我是小二哥！今天给大家推荐一个完全使用TypeScript编写的Vue3组件库：NaiveUI  Vue作者尤雨溪官方推荐。不可小觑！  关于NaiveUINaiveUI是一款基于当前比较新的Vue3.0/TypeScript技术栈开发的前端......
  • Oracle 深入学习 Part 1: Oracle Architectural Components(Oracle 架构组件)
    Oracle服务器（OracleServer）OracleServer是一个管理系统，提供一种开放、全面、集成的信息管理方式。它包含了Oracle实例（OracleInstance）和Oracle数据库（OracleDatabase）。1.Oracle实例（OracleInstance）定义：Oracle实例是访问Oracle数据库的方式，始终打开一个且仅......
  • Flutter用PageView.builder和bottomNavigationBar做出底部小圆点效果
    import'package:flutter/material.dart';voidmain(){runApp(App());}classAppextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){//TODO:implementbuildreturnMaterialApp(debugShowCheckedModeBanner:fal......
  • Unity新导航系统---NavMeshAgent组件&NavMeshLink组件
    系列文章目录Unity新导航系统—NavMeshAgent组件&NavMeshLink组件文章目录系列文章目录前言NavMeshAgent组件NavMeshLink组件前言NavMeshAgent组件：用于控制游戏对象（如角色、AI等）在导航网格（NavMesh）上的移动和路径寻找。NavMeshLink组件：用于创建两个导航......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99