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,)
)
);
}
网友评论