Flutter | 手势操作详解、单独一种类型的事件处理顺序、多种类型的事件混合时的处理顺序...

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()）【运行后点击文本组件】：