Flutter-GestureDetector的二维拖曳手势

配图来自网络,如侵必删

在实际的拖拽手势开发当中,我们可能会接触二维拖拽手势二维拖拽手势是指,同时实现水平垂直方向上移动。

二维拖拽手势事件

事件API 事件描述
onPanDown 用户接触屏幕准备移动触发
onPanStart 用户接触屏幕开始移动触发
onPanUpdate 用户接触屏幕移动之后抬起触发
onPanEnd 用户接触屏幕之后,用户的手指抬起的时候触发的
onPanCancel 用户触发onPanDown没有完成时候触发

简单的使用代码

Stack(
  children: <Widget>[
    Positioned(
      top: top,
      left: left,
      child: GestureDetector(
        onPanDown: (DragDownDetails e) {
          //打印手指按下的位置
          print("手指按下:${e.globalPosition}");
        },
        //手指滑动
        onPanUpdate: (DragUpdateDetails e) {
          setState(() {
            left += e.delta.dx;
            top += e.delta.dy;
          });
        },
        onPanEnd: (DragEndDetails e) {
          //打印滑动结束时在x、y轴上的速度
          print(e.velocity);
        },

        child: Container(
          width: 72,
          height: 72,
          decoration: BoxDecoration(
            color: Colors.blueAccent,
            borderRadius: BorderRadius.circular(36)
          ),
        ),
      ),
    )
  ],
)

这个是一个小球移动的Demo,感兴趣的小伙伴可以直接复制到编译器运行。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容