美文网首页Flutter
Flutter | 手势操作可能遇到的一些问题及其解决

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

作者: 凌川江雪 | 来源:发表于2020-07-10 01:28 被阅读0次

    概要

    • 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){},
            ),
    
    运行效果:
    注意这句话:

    垂直和水平事件不能同时使用

    需要做处理、判断、区分,
    否则会同时触发 垂直和水平 两种事件;

    双击事件要获取点击坐标,需要Pan(Tap)事件

    • 因为onDoubleTap()【双击手势回调】获取不了坐标,
      需要借助onTapDown()onTapUp()Details才行:







    参考自CSDN的Flutter入门课程

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/esunqktx.html