Flutter手势交互 ( 跟随手指运动的小球 )

Flutter 手势 - 跟随手指运动的小球

设置小球坐标变量 : 其中 currentX 是距离左侧边界的距离 , currentY 是距离右侧边界的距离 ;

小球的位置 : 小球是在 Stack 帧布局中的 Positioned 组件 , 其 lefttop 字段值设置其坐标 , 分别对应 currentXcurrentY 值 ;

监听事件 : 监听 GestureDetector 组件的 onPanUpdate 事件 , 其回调方法是 void Function(DragUpdateDetails details) 类型的 方法 , 可以从 DragUpdateDetails 类型参数中获取当前 x , y 的移动距离 , 该距离需要与之前的距离累加 , 才能得到准确的坐标值 ;

在回调方法中调用 setState 方法 , 修改成员变量 currentXcurrentY , 从而修改 Positioned 组件的位置 , 以达到小球移动的目的 ;

代码示例 :

完整代码示例

完整代码示例 :

运行效果 :

参考链接


【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )

发布者

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注