Flutter | 手势操作详解、单独一种类型的事件处理顺序、多
2020-07-06 本文已影响0人
凌川江雪
GestureDetector生命周期
长按事件 案例
GestureDetector的child，用来放 需要实现 某种手势事件 的组件；
【这里GestureDetector封装的是 显示 模拟手机号 的文本组件】：
运行效果：
【点击右侧的 某一个 Text组件】，可以看到相应的log信息被打印出来：
可以看到相应的log信息被打印出来：
通过log，我们可以看到，长按的回调 是按下图的顺序 依次回调的：
details封装的是点击点的坐标等信息【类似于Android的Event】：
点击事件 案例
代码更新：
单击文本组件，log如下【可以看到相关回调方法的顺序】：
双击文本组件，log如下【可以看到相关回调方法的顺序（双击可能有两种回调顺序）】：
长按事件 与 Pan事件 混合回调
回调顺序：
关键代码：
GestureDetector gestureDetectorUsage1(int index) {
return GestureDetector(
/*********************** 长按事件 *****************************/
onLongPress: (){
print('onLongPress');
},
onLongPressStart: (LongPressStartDetails details){
print(''
'onLongPressStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onLongPressMoveUpdate: (LongPressMoveUpdateDetails details){
print(''
'onLongPressMoveUpdate 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onLongPressUp: (){
print('onLongPressUp');
},
onLongPressEnd: (LongPressEndDetails details){
print(''
'onLongPressEnd 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
/*********************** 长按事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
运行效果（圈起来的部分指的是一系列的onLongPressMoveUpdate()）【运行后点击文本组件】：
Tap事件 与 Pan事件 混合回调
回调顺序：
//Tab 与 Pan 混合
GestureDetector gestureDetectorUsage2(int index) {
return GestureDetector(
/*********************** Tap事件 *****************************/
onTap: () {
print('onTap');
},
onTapDown: (TapDownDetails details) {
print(''
'onTapDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapUp: (TapUpDetails details) {
print(''
'onTapUp 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapCancel: () {
print('onTapCancel');
},
/*********************** Tap事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
代码：
运行效果：【运行后点击文本组件】
垂直滑动事件 与 Pan事件 混合
回调顺序：
代码：
//垂直滑动 与 Pan 混合
GestureDetector gestureDetectorUsage3(int index) {
return GestureDetector(
/*********************** 垂直滑动事件 *****************************/
onVerticalDragDown: (DragDownDetails details){
print(''
'onVerticalDragDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onVerticalDragStart: (DragStartDetails details){
print(''
'onVerticalDragStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onVerticalDragUpdate: (DragUpdateDetails details){
print(''
'onVerticalDragUpdate 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onVerticalDragEnd: (DragEndDetails details){
print(''
'onVerticalDragEnd 点击处的坐标为：${details.velocity.toString()} ');
},
onVerticalDragCancel: (){
print('onVerticalDragCancel');
},
/*********************** 垂直滑动事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 速度为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
运行效果：【运行后滑动文本组件】
水平滑动事件 与 Pan事件 混合
回调顺序：
代码：
//水平滑动 与 Pan 混合
GestureDetector gestureDetectorUsage4(int index) {
return GestureDetector(
/*********************** 水平滑动事件 *****************************/
onHorizontalDragDown: (DragDownDetails details){
print(''
'onHorizontalDragDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onHorizontalDragStart: (DragStartDetails details){
print(''
'onHorizontalDragStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onHorizontalDragUpdate: (DragUpdateDetails details){
print(''
'onHorizontalDragUpdate 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onHorizontalDragEnd: (DragEndDetails details){
print(''
'onHorizontalDragEnd 速度为：${details.velocity.toString()} ');
},
onHorizontalDragCancel: (){
print('onHorizontalDragCancel');
},
/*********************** 水平滑动事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
运行效果：【运行后滑动文本组件】
Scale 事件 与 Tap事件 混合
回调顺序：
代码：
// Scale事件 与 Tap事件 混合
GestureDetector gestureDetectorUsage5(int index) {
return GestureDetector(
/*********************** Tap事件 *****************************/
onTap: () {
print('onTap');
},
onTapDown: (TapDownDetails details) {
print(''
'onTapDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapUp: (TapUpDetails details) {
print(''
'onTapUp 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapCancel: () {
print('onTapCancel');
},
/*********************** Tap事件 *****************************/
/*********************** Scale事件 *****************************/
onScaleStart: (ScaleStartDetails details){
print(''
'onScaleStart 点击处的坐标为：${details.localFocalPoint} '
'x轴：${details.localFocalPoint.dx} y轴坐标： ${details.localFocalPoint.dy}');
},
onScaleUpdate: (ScaleUpdateDetails details){
print(''
'onScaleUpdate 点击处的坐标为：${details.localFocalPoint} '
'x轴：${details.localFocalPoint.dx} y轴坐标： ${details.localFocalPoint.dy}');
},
onScaleEnd: (ScaleEndDetails details){
print('onScaleEnd 点击处的坐标为:${details.toString()}');
},
/*********************** Scale事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
运行效果：【运行后滑动文本组件】
双击、Tap、Pan事件混合
回调顺序：
代码：
// 双击、 Tap 、Pan事件 混合
GestureDetector gestureDetectorUsage6(int index) {
return GestureDetector(
/*********************** Tap事件 *****************************/
onDoubleTap: () {
print('onDoubleTap');
},
onTap: () {
print('onTap');
},
onTapDown: (TapDownDetails details) {
print(''
'onTapDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapUp: (TapUpDetails details) {
print(''
'onTapUp 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapCancel: () {
print('onTapCancel');
},
/*********************** Tap事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
运行效果：【运行后双击文本组件（单击则触发 Tap事件 与 Pan事件 混合回调）】
import 'package:flutter/material.dart';
class PageThree extends StatelessWidget {
PageThree(this.data);
String data;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
// title: new Text('目标页面'),
title: new Text('P3.主页传过来的： $data'),
),
// body: RaisedButton(
// onPressed: () {
// print('打开了目标页面');
// Navigator.of(context).pop();
// },
// child: Text('返回上一个页面'),
// ),
body: Contents(),
);
}
}
List<String> names = <String>[
'zhangsan',
'hello world',
'banana',
'lisi',
'Peter',
'老王',
'卢老师',
'TomCat',
'HttpServer',
'小明',
'村口小卖部大叔',
'修理空调张师傅',
'小花',
'Lilei',
'HanMeimei',
];
//模拟手机号
List<String> numbers = <String>[
'12345678900',
'12345678901',
'12345678902',
'12345678903',
'12345678904',
'12345678905',
'12366666666',
'12345678907',
'12345678908',
'12345678906',
'12345678910',
'12345678911',
'12345678912',
'12345678913',
'12345678914',
];
class Contents extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
padding: EdgeInsets.all(8.0),
itemBuilder: (BuildContext context, int index) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RaisedButton(
onPressed: () {
print('返回上个页面');
// Navigator.of(context).pop();
// 把名字传过去
Navigator.of(context).pop('${names[index]}');
},
color: Colors.blueAccent,
child: Text('${names[index]}'),
),
Divider(
height: 1,
),
//使用手势
// 使用 GestureDetector 把每一个Item 的 Text组件 给包括起来
// GestureDetector(
//
// /*********************** 点击事件 *****************************/
//// onTap: (){
//// print('onTap');
//// },
//// onTapDown: (TapDownDetails details){
//// print(''
//// 'onTapDown 点击处的坐标为：${details.globalPosition} '
//// 'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
//// },
////
//// onTapUp: (TapUpDetails details){
//// print(''
//// 'onTapUp 点击处的坐标为：${details.globalPosition} '
//// 'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
//// },
//// onTapCancel: (){
//// print('onTapCancel');
//// },
//// onDoubleTap: (){
//// print('onDoubleTap');
//// },
// /*********************** 点击事件 *****************************/
//
//
// /*********************** 长按事件 *****************************/
//// onLongPress: (){
//// print('onLongPress');
//// },
//// onLongPressStart: (LongPressStartDetails details){
//// print(''
//// 'onLongPressStart 点击处的坐标为：${details.globalPosition} '
//// 'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
//// },
//// onLongPressMoveUpdate: (LongPressMoveUpdateDetails details){
//// print(''
//// 'onLongPressMoveUpdate 点击处的坐标为：${details.globalPosition} '
//// 'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
//// },
//// onLongPressUp: (){
//// print('onLongPressUp');
//// },
//// onLongPressEnd: (LongPressEndDetails details){
//// print(''
//// 'onLongPressEnd 点击处的坐标为：${details.globalPosition} '
//// 'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
//// },
// /*********************** 长按事件 *****************************/
//
// //手势事件的 测试组件
// child:
// //显示 模拟手机号 的文本
// Text(
// '${numbers[index]}',
// style: TextStyle(
// color:Colors.orange,
// fontSize: 15,)
// )
// ),
// Text('${numbers[index]}'),
//GestureDetector 混合使用
// gestureDetectorUsage1(index),
gestureDetectorUsage6(index),
],
);
},
itemCount: names.length,
);
}
}
/**
* GestureDetector 混合使用
*
* index：数据索引
*/
//长按 与 Pan 混合
GestureDetector gestureDetectorUsage1(int index) {
return GestureDetector(
/*********************** 长按事件 *****************************/
onLongPress: (){
print('onLongPress');
},
onLongPressStart: (LongPressStartDetails details){
print(''
'onLongPressStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onLongPressMoveUpdate: (LongPressMoveUpdateDetails details){
print(''
'onLongPressMoveUpdate 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onLongPressUp: (){
print('onLongPressUp');
},
onLongPressEnd: (LongPressEndDetails details){
print(''
'onLongPressEnd 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
/*********************** 长按事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
//Tab 与 Pan 混合
GestureDetector gestureDetectorUsage2(int index) {
return GestureDetector(
/*********************** Tap事件 *****************************/
onTap: () {
print('onTap');
},
onTapDown: (TapDownDetails details) {
print(''
'onTapDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapUp: (TapUpDetails details) {
print(''
'onTapUp 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapCancel: () {
print('onTapCancel');
},
/*********************** Tap事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
//垂直滑动 与 Pan 混合
GestureDetector gestureDetectorUsage3(int index) {
return GestureDetector(
/*********************** 垂直滑动事件 *****************************/
onVerticalDragDown: (DragDownDetails details){
print(''
'onVerticalDragDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onVerticalDragStart: (DragStartDetails details){
print(''
'onVerticalDragStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onVerticalDragUpdate: (DragUpdateDetails details){
print(''
'onVerticalDragUpdate 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onVerticalDragEnd: (DragEndDetails details){
print(''
'onVerticalDragEnd 速度为：${details.velocity.toString()} ');
},
onVerticalDragCancel: (){
print('onVerticalDragCancel');
},
/*********************** 垂直滑动事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
//水平滑动 与 Pan 混合
GestureDetector gestureDetectorUsage4(int index) {
return GestureDetector(
/*********************** 水平滑动事件 *****************************/
onHorizontalDragDown: (DragDownDetails details){
print(''
'onHorizontalDragDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onHorizontalDragStart: (DragStartDetails details){
print(''
'onHorizontalDragStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onHorizontalDragUpdate: (DragUpdateDetails details){
print(''
'onHorizontalDragUpdate 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onHorizontalDragEnd: (DragEndDetails details){
print(''
'onHorizontalDragEnd 速度为：${details.velocity.toString()} ');
},
onHorizontalDragCancel: (){
print('onHorizontalDragCancel');
},
/*********************** 水平滑动事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
// Scale事件 与 Tap事件 混合
GestureDetector gestureDetectorUsage5(int index) {
return GestureDetector(
/*********************** Tap事件 *****************************/
onTap: () {
print('onTap');
},
onTapDown: (TapDownDetails details) {
print(''
'onTapDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapUp: (TapUpDetails details) {
print(''
'onTapUp 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapCancel: () {
print('onTapCancel');
},
/*********************** Tap事件 *****************************/
/*********************** Scale事件 *****************************/
onScaleStart: (ScaleStartDetails details){
print(''
'onScaleStart 点击处的坐标为：${details.localFocalPoint} '
'x轴：${details.localFocalPoint.dx} y轴坐标： ${details.localFocalPoint.dy}');
},
onScaleUpdate: (ScaleUpdateDetails details){
print(''
'onScaleUpdate 点击处的坐标为：${details.localFocalPoint} '
'x轴：${details.localFocalPoint.dx} y轴坐标： ${details.localFocalPoint.dy}');
},
onScaleEnd: (ScaleEndDetails details){
print('onScaleEnd 点击处的坐标为:${details.toString()}');
},
/*********************** Scale事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
// 双击、 Tap 、Pan事件 混合
GestureDetector gestureDetectorUsage6(int index) {
return GestureDetector(
/*********************** Tap事件 *****************************/
onDoubleTap: () {
print('onDoubleTap');
},
onTap: () {
print('onTap');
},
onTapDown: (TapDownDetails details) {
print(''
'onTapDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapUp: (TapUpDetails details) {
print(''
'onTapUp 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition
.dy}');
},
onTapCancel: () {
print('onTapCancel');
},
/*********************** Tap事件 *****************************/
/*********************** Pan事件 *****************************/
onPanDown: (DragDownDetails details){
print(''
'onPanDown 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanStart: (DragStartDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanUpdate: (DragUpdateDetails details){
print(''
'onPanStart 点击处的坐标为：${details.globalPosition} '
'x轴：${details.globalPosition.dx} y轴坐标： ${details.globalPosition.dy}');
},
onPanEnd: (DragEndDetails details){
print('onPanEnd 点击处的坐标为:${details.primaryVelocity.toString()}');
},
onPanCancel: (){
print('onPanCancel');
},
/*********************** Pan事件 *****************************/
//手势事件的 测试组件
child:
//显示 模拟手机号 的文本
Text(
'${numbers[index]}',
style: TextStyle(
color:Colors.orange,
fontSize: 15,)
)
);
}
