美文网首页
Flutter-GestureDetector的二维拖曳手势

Flutter-GestureDetector的二维拖曳手势

作者: 阿博聊编程 | 来源:发表于2022-06-17 21:56 被阅读0次
配图来自网络,如侵必删

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

二维拖拽手势事件

事件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,感兴趣的小伙伴可以直接复制到编译器运行。

相关文章

网友评论

      本文标题:Flutter-GestureDetector的二维拖曳手势

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