Flutter手势--GestureDetector各种手势使用详情
Posted ~废弃回忆 �༄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flutter手势--GestureDetector各种手势使用详情相关的知识，希望对你有一定的参考价值。
1.GestureDetector单击手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onTapDown | GestureTapDownCallback | 手指按下时的回调函数 |
| 2 | onTapUp | GestureTapUpCallback | 手指松开时的回调函数 |
| 3 | onTap | GestureTapCallback | 手指点击时的回调函数 |
| 4 | 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("Jimi",
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: onTapCancel2.GestureDetector双击手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onDoubleTapDown | GestureTapDownCallback | 手指按下时的回调函数 |
| 2 | onDoubleTap | GestureTapCallback | 手指双击时的回调函数 |
| 3 | onDoubleTapCancel | 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(
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双击手势控制台输出结果
第一种：双击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: onDoubleTapCancel3.GestureDetector长按手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onLongPressDown | GestureLongPressDownCallback | 手指按下去时的回调函数 |
| 2 | onLongPressCancel | GestureLongPressCancelCallback | 手指长按取消时的回调函数 |
| 3 | onLongPress | GestureLongPressCallback | 手指长按时的回调函数 |
| 4 | onLongPressStart | GestureLongPressStartCallback | 手指长按并开始拖动时的回调函数 |
| 5 | onLongPressMoveUpdate | GestureLongPressMoveUpdateCallback | 手指长按并移动时的回调函数 |
| 6 | onLongPressUp | GestureLongPressUpCallback | 手指长按并松开时的回调函数 |
| 7 | onLongPressEnd | GestureLongPressEndCallback | 手指长按结束拖动时的回调函数 |
我们在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长按手势控制台输出结果
第一种：单击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: onLongPressCancel4.GestureDetector垂直滑动手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onVerticalDragDown | GestureDragDownCallback | 手指按下时的回调函数 |
| 2 | onVerticalDragStart | GestureDragStartCallback | 手指开始垂直滑动时的回调函数 |
| 3 | onVerticalDragUpdate | GestureDragUpdateCallback | 手指垂直滑动时的回调函数 |
| 4 | onVerticalDragEnd | GestureDragEndCallback | 手指垂直滑动结束时的回调函数 |
| 5 | onVerticalDragCancel | GestureDragCancelCallback | 手指垂直滑动取消时的回调函数 |
我们在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: onVerticalDragCancel5.GestureDetector水平滑动手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onHorizontalDragDown | GestureDragDownCallback | 手指按下时的回调函数 |
| 2 | onHorizontalDragStart | GestureDragStartCallback | 手指开始水平滑动时的回调函数 |
| 3 | onHorizontalDragUpdate | GestureDragUpdateCallback | 手指水平滑动时的回调函数 |
| 4 | onHorizontalDragEnd | GestureDragEndCallback | 手指水平滑动结束时的回调函数 |
| 5 | onHorizontalDragCancel | GestureDragCancelCallback | 手指水平滑动取消时的回调函数 |
我们在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: onHorizontalDragCancel6.GestureDetector拖动手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onPanDown | GestureDragDownCallback | 手指按下时的回调函数 |
| 2 | onPanStart | GestureDragStartCallback | 手指开始拖动时的回调函数 |
| 3 | onPanUpdate | GestureDragUpdateCallback | 手指移动时的回调函数 |
| 4 | onPanEnd | GestureDragEndCallback | 手指抬起时的回调函数 |
| 5 | onPanCancel | GestureDragCancelCallback | 手指取消拖动时的回调函数 |
我们在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: onPanCancel7.GestureDetector缩放手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onScaleStart | GestureScaleStartCallback | 开始缩放时的回调函数 |
| 2 | onScaleUpdate | GestureScaleUpdateCallback | 缩放移动时的回调函数 |
| 3 | onScaleEnd | GestureScaleEndCallback | 缩放结束时的回调函数 |
我们在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)---18.带有3D Touch功能压力设备触发手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onForcePressStart | GestureForcePressStartCallback | 手指强制按下时的回调函数 |
| 2 | onForcePressPeak | GestureForcePressPeakCallback | 手指按压力度最大时的回调函数 |
| 3 | onForcePressUpdate | GestureForcePressUpdateCallback | 手指按下后移动时的回调函数 |
| 4 | onForcePressEnd | GestureForcePressEndCallback | 手指离开时的回调函数 |
9.辅助按钮触发手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onSecondaryTap | GestureTapCallback | 辅助按钮单击时的回调函数 |
| 2 | onSecondaryTapDown | GestureTapDownCallback | 辅助按钮按下时的回调函数 |
| 3 | onSecondaryTapUp | GestureTapUpCallback | 辅助按钮松开时的回调函数 |
| 4 | onSecondaryTapCancel | GestureTapCancelCallback | 辅助按钮取消点击时的回调函数 |
| 5 | onSecondaryLongPressDown | GestureLongPressDownCallback | 辅助按钮按下去时的回调函数 |
| 6 | onSecondaryLongPressCancel | GestureLongPressCancelCallback | 辅助按钮长按取消时的回调函数 |
| 7 | onSecondaryLongPress | GestureLongPressCallback | 辅助按钮长按时的回调函数 |
| 8 | onSecondaryLongPressStart | GestureLongPressStartCallback | 辅助按钮长按并开始拖动时的回调函数 |
| 9 | onSecondaryLongPressMoveUpdate | GestureLongPressMoveUpdateCallback | 辅助按钮长按并移动时的回调函数 |
| 10 | onSecondaryLongPressUp | GestureLongPressUpCallback | 辅助按钮长按并松开时的回调函数 |
| 11 | onSecondaryLongPressEnd | GestureLongPressEndCallback | 辅助按钮长按结束拖动时的回调函数 |
10.三指触发手势
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | onTertiaryTapDown | GestureTapDownCallback | 三指按下时的回调函数 |
| 2 | onTertiaryTapUp | GestureTapUpCallback | 三指点击时的回调函数 |
| 3 | onTertiaryTapCancel | GestureTapCancelCallback | 三指取消时的回调函数 |
| 4 | onTertiaryLongPressDown | GestureLongPressDownCallback | 三指按下去时的回调函数 |
| 5 | onTertiaryLongPressCancel | GestureLongPressCancelCallback | 三指长按取消时的回调函数 |
| 6 | onTertiaryLongPress | GestureLongPressCallback | 三指长按时的回调函数 |
| 7 | onTertiaryLongPressStart | GestureLongPressStartCallback | 三指长按并开始拖动时的回调函数 |
| 8 | onTertiaryLongPressMoveUpdate | GestureLongPressMoveUpdateCallback | 三指长按并移动时的回调函数 |
| 9 | onTertiaryLongPressUp | GestureLongPressUpCallback | 三指长按并松开时的回调函数 |
| 10 | onTertiaryLongPressEnd | GestureLongPressEndCallback | 三指长按结束拖动时的回调函数 |
11.其他属性
| 序列号 | 字段 | 属性 | 描述 |
|---|---|---|---|
| 1 | child | Widget | 子组件 |
| 2 | behavior | HitTestBehavior | 在命中测试期间如何表现 |
| 3 | excludeFromSemantics | bool | 是否从语义树中排除这些手势，默认false |
| 4 | dragStartBehavior | DragStartBehavior | 拖拽行为的处理方式 |
flutter手势
import ‘package:flutter/material.dart‘; import ‘package:flutter_app/pages/dismissed_page.dart‘; class GestureAppPage extends StatefulWidget @override State<StatefulWidget> createState() // TODO: implement createState return new _GestureAppPageState(); class _GestureAppPageState extends State<GestureAppPage> var tapEvent = ‘‘; // _showSnakeBar(String str) // final snackBar = new SnackBar(content: new Text(str)); // Scaffold.of(context).showSnackBar(snackBar); // @override Widget build(BuildContext context) // TODO: implement build return new Scaffold( appBar: new AppBar( title: new Text(‘Gesture 学习‘), centerTitle: true, ), body: new ListView( children: <Widget>[ new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new RaisedButton( textColor: Colors.black, child: new Text(‘RaisedButton 点击‘), onPressed: () final snackBar = new SnackBar(content: new Text("这是一个 RaisedButton 点击事件,onPressed处理")); Scaffold.of(context).showSnackBar(snackBar); // _showSnakeBar("这是一个 RaisedButton 点击事件,onPressed处理"); ), ), new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new GestureDetector( onTap: () final snackBar = new SnackBar(content: new Text("这是一个GestureDetector监听的onTap事件")); Scaffold.of(context).showSnackBar(snackBar); // _showSnakeBar("这是一个GestureDetector监听的onTap事件"); , child: new BorderButton(‘GestureDetector onTap 按钮‘), ), ), new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new Text(tapEvent, style: Theme.of(context).textTheme.display1), ), new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new GestureDetector( onTapDown: (tapDown) setState(() tapEvent = ‘这是GestureDetector监听的onTapDown事件‘; ); , onTapUp: (tapUp) setState(() tapEvent = ‘这是GestureDetector监听的onTapUp事件‘; ); , onTapCancel: () setState(() tapEvent = ‘这是GestureDetector监听的onTapCancel事件‘; ); , onDoubleTap: () setState(() tapEvent = ‘这是GestureDetector监听的onDoubleTap事件‘; ); , onLongPress: () setState(() tapEvent = ‘这是GestureDetector监听的onLongPress事件‘; ); , child: new BorderButton(‘GestureDetector onTap 分解事件按钮‘), ), ), new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new Text(‘上面的按钮通过GestureDetector监听事件后，涟漪效果消失了，使用下面的方案解决‘), ), new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new InkWell( borderRadius: new BorderRadius.all(new Radius.circular(10.0)), onTap: () final snackBar = new SnackBar(content: new Text("这是一个InkWell监听的onTap事件")); Scaffold.of(context).showSnackBar(snackBar); // _showSnakeBar("这是一个InkWell监听的onTap事件"); , child: new BorderButton(‘InkWell 按钮‘), )), new Padding( padding: const EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0), child: new InkWell( borderRadius: new BorderRadius.all(new Radius.circular(10.0)), onTap: () Navigator.of(context).push(new MaterialPageRoute(builder: (context)=> new DismissedPage())); , child: new BorderButton(‘Dismissed 手势‘), )), ], ), ); class BorderButton extends StatelessWidget final String text; BorderButton(this.text); @override Widget build(BuildContext context) // TODO: implement build return new Container( alignment: Alignment.center, padding: const EdgeInsets.only( left: 10.0, top: 10.0, right: 10.0, bottom: 10.0), height: 48.0, decoration: new BoxDecoration( border: new Border.all( width: 1.0, color: Colors.blue, ), borderRadius: new BorderRadius.all(new Radius.circular(10.0)), ), // foregroundDecoration: new BoxDecoration( // border: new Border.all( // width: 1.0, // color: Colors.red, // ), // borderRadius: new BorderRadius.all(new Radius.circular(10.0)), // ), child: new Text(text), ); class GesturePage extends StatelessWidget @override Widget build(BuildContext context) // TODO: implement build return new Scaffold( body: new GestureAppPage(), );
以上是关于Flutter手势--GestureDetector各种手势使用详情的主要内容，如果未能解决你的问题，请参考以下文章
Flutter手势--GestureDetector各种手势使用详情