flutter中同时满足缩放与拖动、旋转手势

左手的ㄟ右手 2022-12-22 04:53 456阅读 0赞

现在的百度真是越来越垃圾了，搜到的内容都是千篇一律，在本人开发中遇到了一个需求，就是一个控件需要能拖动，还需要旋转和缩放。于是按照面向搜索引擎编程的习惯打开了百度，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1eWllMDA3_size_16_color_FFFFFF_t_70][]

其内容都是讲解GestureDetector的一些方法，点击 是onTap ，拖动是onPanUpDate，缩放是onScaleUpdate方法。

但是当onPanUpDate和onScaleUpdate一起使用的时候报错了，尼玛！

看了提示 发现onScaleUpdate 是onPanUpDate的超集。经过半天的仔细研究才发现 onScale里也是可以实现拖动的，不过位置总乱跳是什么鬼，我靠！

又研究了半天才知道 写法不太一样 还需要配合onScaleStart.

代码如下：

dx和dy分别代表 控件的x，y坐标。

Positioned(
          top: dy,
          left: dx,
          child: GestureDetector(
            onScaleStart: (d) {
              print('start localFocalPoint:${d.localFocalPoint}');
              print('start focalPoint:${d.focalPoint}');
              _lastOffset = d.focalPoint;
            },
            onScaleUpdate: (ScaleUpdateDetails d) {
    
    
              dx += (d.focalPoint.dx - _lastOffset.dx);
              dy += (d.focalPoint.dy - _lastOffset.dy);
    
              if (d.scale != 1) {
                scale = d.scale.clamp(0.3, 8);
              }
              if (d.rotation != 0) {
                rotation = d.rotation;
              }
              _lastOffset = d.focalPoint;
              setState(() {
               
              });
            },
            child: Transform.rotate(angle: rotation, child: textView(scale)),
          ),
        );

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1eWllMDA3_size_16_color_FFFFFF_t_70]: /images/20221120/39adaae79a58444ebd48205b7977a686.png