Flutter | 手势操作可能遇到的一些问题及其解决

最新推荐文章于 2025-09-24 12:42:32 发布

原创最新推荐文章于 2025-09-24 12:42:32 发布 · 958 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨Flutter中手势识别器的使用限制，如Pan和Scale、垂直和水平事件不能同时使用的问题，以及如何通过Pan事件获取双击坐标的技巧。文章提供了代码示例，帮助开发者理解并解决手势操作冲突。

概要

Pan和Scale不能同时使用；
垂直和水平事件不能同时使用；
双击事件要获取点击坐标，需要Pan事件

Pan和Scale不能同时使用

代码：

GestureDetector(
          child:
          Text(
            '手势操作遇到问题的测试',
            style:TextStyle(color: Colors.orangeAccent, fontSize: 20),
          ),
          /*********************** 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事件 *****************************/
        onScaleStart: (ScaleStartDetails details){},
        onScaleUpdate: (ScaleUpdateDetails details){},
        ),

运行效果：