GestureDetector

GestureDetector 内部封装了 Listener，是一个用于手势识别的功能性组件，我们通过它可以来识别各种手势。其构造函数：

GestureDetector({
    super.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.onSecondaryLongPressDown,
    this.onSecondaryLongPressCancel,
    this.onSecondaryLongPress,
    this.onSecondaryLongPressStart,
    this.onSecondaryLongPressMoveUpdate,
    this.onSecondaryLongPressUp,
    this.onSecondaryLongPressEnd,
    this.onTertiaryLongPressDown,
    this.onTertiaryLongPressCancel,
    this.onTertiaryLongPress,
    this.onTertiaryLongPressStart,
    this.onTertiaryLongPressMoveUpdate,
    this.onTertiaryLongPressUp,
    this.onTertiaryLongPressEnd,
    this.onVerticalDragDown,//垂直拖动按下事件回调
    this.onVerticalDragStart,//垂直拖动开始事件回调
    this.onVerticalDragUpdate,//指针移动更新事件回调
    this.onVerticalDragEnd,//垂直拖动结束事件回调
    this.onVerticalDragCancel,//垂直拖动取消事件回调
    this.onHorizontalDragDown,//水平拖动按下事件回调
    this.onHorizontalDragStart,//水平拖动开始事件回调
    this.onHorizontalDragUpdate,//指针移动更新事件回调
    this.onHorizontalDragEnd,//水平拖动结束事件回调
    this.onHorizontalDragCancel,//水平拖动取消事件回调
    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,
  })

• 点击事件Tap

onTapDown //按下的手势
onTapUp//抬起的手势
onTap//点击
onTapCancel//取消手势

例子：

GestureDetector(
  onTapDown: (TapDownDetails details){
    print('按下时回调');
  },
  onTapUp: (TapUpDetails details){
    print('抬起时回调');
  },
  onTap: () {
    print('点击');
  },
  onTapCancel: (){
    print('点击取消事件回调');
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
  ),
)

运行结果：

flutter: 按下时回调
flutter: 抬起时回调
flutter: 点击

• 双击事件onDoubleTap，只有一种

onDoubleTap

例子：

GestureDetector(
  onDoubleTap: (){
    print('双击');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

• 长按事件

onLongPressCancel,//长按事件取消
onLongPress,//长按事件回调
onLongPressStart,//长按开始事件回调
onLongPressMoveUpdate,//长按移动事件回调
onLongPressUp,//长按抬起事件回调
onLongPressEnd,//长按结束事件回调

例子：

 GestureDetector(
      onLongPressStart: (e)=>print('onLongPressStart'),
      onLongPressMoveUpdate: (e) => print('onLongPressMoveUpdate'),
      onLongPressUp: ()=>print('onLongPressUp'),
      onLongPressEnd: (e)=>print('onLongPressEnd'),
      onLongPress: ()=>print('onLongPress'),
      child: Container(
        width: 100,
        height: 100,
        color: Colors.pink,
      ),
    )

运行结果：

flutter: onLongPressStart
flutter: onLongPress
flutter: onLongPressEnd
flutter: onLongPressUp

• Verticaldrag表示的是垂直方向的拉,它有三个事件:

onVerticalDragStart //垂直拉开始
onVerticalDragUpdate //垂直拉更新
onVerticalDragEnd //垂直拉结束

例子：

 GestureDetector(
      onVerticalDragStart: (v) => print('onVerticalDragStart'),
      onVerticalDragDown: (v) => print('onVerticalDragDown'),
      onVerticalDragUpdate: (v) => print('onVerticalDragUpdate'),
      onVerticalDragCancel: () => print('onVerticalDragCancel'),
      onVerticalDragEnd: (v) => print('onVerticalDragEnd'),
      child: Center(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    )

运行结果：

flutter: onVerticalDragDown
flutter: onVerticalDragStart
flutter: onVerticalDragUpdate
.....
flutter: onVerticalDragUpdate
flutter: onVerticalDragEnd

• Horizontaldrag表示的是水平方向的拉,它同样有三个事件： (同垂直)

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

• Pan同时可以水平或者垂直移动的事件

(Pan是和单独的Verticaldrag、Horizontaldrag是相互冲突的，不能同时使用)

onPanStart
onPanUpdate
onPanEnd

例子：

GestureDetector(
  onPanDown: (DragDownDetails details){
    print('用户手指按下');
  },
  onPanUpdate: (DragUpdateDetails details){
    print('手指滑动时会触发此回调');
  },
  onPanEnd: (DragEndDetails details){
    print('结束');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.amber,
  ),
)

运行结果：

flutter: 用户手指按下
flutter: 手指滑动时会触发此回调
......
flutter: 手指滑动时会触发此回调
flutter: 结束

• 缩放事件

onScaleStart
onScaleUpdate
onScaleEnd

例子：

import 'package:flutter/material.dart';
class GestureDetectorPage extends StatefulWidget {
  const GestureDetectorPage({Key? key}) : super(key: key)
  @override
  State<GestureDetectorPage> createState() => _GestureDetectorPageState();
}

class _GestureDetectorPageState extends State<GestureDetectorPage> {
  double _width = 200.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('GestureDetector'),),
      body: Center(
        child: Column(
          children: [
            GestureDetector(
              child: Image.asset('images/liu.webp',width: _width,),
              onScaleUpdate: (ScaleUpdateDetails details){
                print(details);
                setState(() {
                  //缩放倍数在0.8到10倍之间
                  _width = 200*details.scale.clamp(.8, 10);
                });
              },
            )
          ],
        ),
      )
    );
  }
}