Flutter手势组件（3）：GestureDetector

news/2024/12/26 11:21:31/文章来源:https://www.cnblogs.com/linuxAndMcu/p/18556709

一、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> {@overrideWidget 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});@overrideWidget build(BuildContext context) {return MaterialApp(home: GestureDetectorExample(),);}
}class GestureDetectorExample extends StatefulWidget {const GestureDetectorExample({super.key});   @overrideState<GestureDetectorExample> createState() => _GestureDetectorExampleState();    
}class _GestureDetectorExampleState extends State<GestureDetectorExample> {@overrideWidget 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});@overrideWidget build(BuildContext context) {return MaterialApp(home: GestureDetectorExample(),);}
}class GestureDetectorExample extends StatefulWidget {const GestureDetectorExample({super.key});   @overrideState<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}class _GestureDetectorExampleState extends State<GestureDetectorExample> {@overrideWidget 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});@overrideWidget build(BuildContext context) {return MaterialApp(home: GestureDetectorExample(),);}
}class GestureDetectorExample extends StatefulWidget {const GestureDetectorExample({super.key});   @overrideState<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}class _GestureDetectorExampleState extends State<GestureDetectorExample> {final double _left = 0;double _top = 0;@overrideWidget 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});@overrideWidget build(BuildContext context) {return MaterialApp(home: GestureDetectorExample(),);}
}class GestureDetectorExample extends StatefulWidget {const GestureDetectorExample({super.key});   @overrideState<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}class _GestureDetectorExampleState extends State<GestureDetectorExample> {double _left = 0;final double _top = 0;@overrideWidget 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});@overrideWidget build(BuildContext context) {return MaterialApp(home: GestureDetectorExample(),);}
}class GestureDetectorExample extends StatefulWidget {const GestureDetectorExample({super.key});   @overrideState<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}class _GestureDetectorExampleState extends State<GestureDetectorExample> {double _left = 0;double _top = 0;@overrideWidget 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});@overrideWidget build(BuildContext context) {return MaterialApp(home: GestureDetectorExample(),);}
}class GestureDetectorExample extends StatefulWidget {const GestureDetectorExample({super.key});   @overrideState<GestureDetectorExample> createState() => _GestureDetectorExampleState();
}class _GestureDetectorExampleState extends State<GestureDetectorExample> {double _left = 0;double _top = 0;@overrideWidget 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必须掌握的一个组件，能实现很多效果，如给容器添加手势、全局悬浮按钮、图片缩放等功能。


本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/837313.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

11.18 学习

11.18 学习

11.18 学习 1.sqlselect m.user_id,round(ifnull(cfnum/p,0),2) confimation_rate from (select a.user_id,ifnull(num,0) p from Signups a left join (select user_id,count(*) num from Confirmations group by user_id)b on a.user_id=b.user_id) m left join(select user_…
阅读更多...
2024-11-20：交替子数组计数。用go语言，给定一个二进制数组 nums， 如果一个子数组中的相邻元素的值都不相同，我们称这个子数组为交替子数组。 请返回数组 nums 中交替子数组的总数。 输

2024-11-20：交替子数组计数。用go语言，给定一个二进制数组 nums， 如果一个子数组中的相邻元素的值都不相同，我们称这个子数组为交替子数组。 请返回数组 nums 中交替子数组的总数。 输

2024-11-20：交替子数组计数。用go语言，给定一个二进制数组 nums， 如果一个子数组中的相邻元素的值都不相同，我们称这个子数组为交替子数组。 请返回数组 nums 中交替子数组的总数。 输入： nums = [0,1,1,1]。 输出： 5。 解释： 以下子数组是交替子数组：[0] 、[1] 、[1] …
阅读更多...
登录对话框

登录对话框

1.粉红（1）显示 　　（2）格式/**该页面为粉红色皮肤 *//*背景*/ #frame_background{ border-image:url(:/res/pic/background-1.png); }/*登录背景*/ #frame_login{background-color:#ffffff}/*右侧图片*/ #frame_pic{background-image:url(:/res/pic/1.png);} /*账户和密码框…
阅读更多...
Windows注册表增加右键多级菜单

Windows注册表增加右键多级菜单

前言全局说明一、说明 环境: Windows 11 家庭版 23H2 22631.3737Windows 7 旗舰版二、注册表说明 2.1 项说明 HKEY_CLASSES_ROOT*：系统所有文件，右键系统任一文件都会添加右键菜单 HKEY_CLASSES_ROOT\.txt：在.txt文件，添加右键菜单 HKEY_CLASSES_ROOT\AllFilesystemObjects…
阅读更多...
关于使用Pycharm新建flask项目 from flask 红色波浪线解决办法

关于使用Pycharm新建flask项目 from flask 红色波浪线解决办法

首先保证 flask已经安装 pip install flask如果依旧报红,依次打开:设置->项目:->项目结构点击 添加内容根 选择当前项目的.venv/Lib/site-packages最后应用保存
阅读更多...
Day34--方法的重写

Day34--方法的重写

Day34--方法的重写 override 重写 重写是方法的重写，和属性无关 示例： 创建下面三个java文件,并在A.java B.java里面创建方法,Application里面初始化A并引用test方法 ​ A类是B类的子类 package com.liu.oop.demo05;public class A extends B{public static void test…
阅读更多...
分享三个选股思路： 元宝底、多维共振、短线金叉

分享三个选股思路： 元宝底、多维共振、短线金叉

分享三个选股思路： 元宝底、多维共振、短线金叉 作者： 深海游鱼 QQ：396068801 日期：2024年11月 1.元宝底：三条短线快速形成金叉时，是短线追涨买点。 2. 多维共振： 最价金叉+Macd水上金叉，也是短线买点，如果能回踩接人更好。 3. 短线金叉： 三条短期均线聚拢，首日形…
阅读更多...
（1）环境准备

（1）环境准备

前言 暑假趁着打折买的7020，一直到现在（2024年11月20日12:56:06）才打开，然后今天心血来潮准备那驱动啥的都捯饬一下，顺便这几天再看一看有些操作，免得后面用的时候才临时去弄 设备连接 如下图，很方便，直接一根type-c线就搞定了，因为这玩意的下载器直接集成在开发板上了…
阅读更多...
SUMO文档阅读——PlainXML

SUMO文档阅读——PlainXML

Tutorials https://sumo.dlr.de/docs/Tutorials/index.html net.xml (道路设置) 和 route.xml (车类型设置 + 车流量设置) + .sumocfg (综合前两个xml文件) 十字路口的例子 https://sumo.dlr.de/docs/Networks/PlainXML.html Tools https://sumo.dlr.de/docs/Tools/#tools_by_…
阅读更多...
大学减负小技巧

大学减负小技巧

一切仅供学习研究参考。 方法有很多，这里只提供本人认为最方便的手段。 一.脚本刷网课 以Edge浏览器，超星学习通为例 1. 下载脚本管理器，这里使用篡改猴 (Tampermonkey)第二个，下载安装，并固定到工具栏 2.下载合适的脚本，这里推荐这个extension://iikmkjmpaadaobahmlepel…
阅读更多...
国产数据库oceanBbase,达梦,金仓与mysql数据库的性能对比 一、比对方法和结果

国产数据库oceanBbase,达梦,金仓与mysql数据库的性能对比 一、比对方法和结果

最近调研了三款国产化数据库与mysql做对比，调研主要性能指标是大数据写入速度、大数据读取速度以及是否支持分表。 一、测试结果 测试结果与预期的差别很大 1、先说oceanBase社区版这款数据库官网上描述性能非常好，感觉可以秒杀mysql，但实际测试结果单节点的情况下，和…
阅读更多...
Moebius for SQL Server

Moebius for SQL Server

Moebius（莫比斯）介绍 Moebius数据库多活集群是格瑞趋势为SQL Server数据库研发的能够同时满足可用性、数据安全、容灾、读写分离、负载均衡的一站式多活集群。集群的名字取自Moebius环，寓意无限扩展。Moebius采用“share nothing”架构，每个节点的SQL Server服务独立安装，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023