Flutter手势组件（3）：GestureDetector
一、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
),
),
),
)
],
),
),
);
}
}
效果图如下所示：
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
),
),
),
)
],
),
),
);
}
}
效果图如下所示：
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
),
),
),
)
],
),
),
);
}
}
效果图如下所示：
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
),
),
),
)
],
),
)
],
),
),
);
}
}
效果图如下所示：
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
),
),
),
)
],
),
)
],
),
),
);
}
}
效果图如下所示：
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
),
),
),
)
],
),
)
],
),
),
);
}
}
效果图如下所示：
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
),
),
),
)
],
),
)
],
),
),
);
}
}
效果图如下所示：
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必须掌握的一个组件，能实现很多效果，如给容器添加手势、全局悬浮按钮、图片缩放等功能。
