第一百四十六回 跟手指移动的小球

我们在上一章回中介绍了如何给组件添加阴影相关的内容，本章回中将介绍如何实现一个 跟手指移动的小球.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的内容是一个小圆球，当手指在手机屏幕上点击或者移动时，它会跟着手指移动，手指移动到哪里小圆球就跟到哪里，真正做到形影不离。

实现这个移动的的小圆球需要使用手势识别组件:GestureDetector.我们在前面章回中介绍过该组件的使用方法，如果有看官忘记了可以点击这里查看。本章回中将介绍如何使用GestureDetector组件实现跟手指移动的小圆球。

实现方法

1. 使用Container组件创建一个圆球组件；
2. 在圆球组件外层嵌套一个Stack组件，圆球的位置通过Posiontioned组件控制；
3. 在Stack组件外层嵌套GestureDetector组件，通过组件来捕获手指滑动事件；
4. 给GestureDetector组件的onPanUpdate属性和onPanEnd属性赋值；

我们重点说一下第4步中的两个属性，这两个属性都是方法类型，当手指在手机屏幕上移动时会回调onPanUpdate属性对应的方法，当手指停止移动时会回调onPanEnd属性对应的方法。我们可以在这两个方法中修改小圆球的坐标，让它的坐标和手指滑动位置的坐标相同，这样就可以让小圆球跟着手指移动。

示例代码

///创建小圆球组件
class Ball extends StatelessWidget {
  const Ball({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 60,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.green,
      ),
    );
  }
}


GestureDetector(
  child: Container(
    color: Colors.yellow,
    width: bigX,
    height: bigY,
    child: Stack(
      children: [
        Positioned(
          left: smallX,
          top: smallY,
          child:const Ball(),),
      ],
    ),
  ),
  ///响应拖动事件，注意事件中的坐标值是偏移值
  ///global是相对于屏幕的坐标，local是相对于父组件,delta是相对和偏移值
  onPanUpdate: (DragUpdateDetails details) {
    setState(() {
      ///使用偏移值的方法修改小圆坐标,不需要考虑ball的大小，因为得到的是偏移量
      smallX += details.delta.dx;
      smallY += details.delta.dy;
      ///使用当前坐标值的方法修改小圆坐标,需要考虑ball的大小，否则不够精确
      // smallX = details.localPosition.dx - smallR;
      // smallY = details.localPosition.dy - smallR;
    });
  },
  ///响应停止拖动事件,停止拖动后ball回到原位
  onPanEnd: (DragEndDetails details) {
    setState(() {
      smallX = smallY = 100;
    });
  },
),

我们在上面的代码中添加了注释，这样方便大家理解代码。此外，在修改小圆球的坐标时，使用了两种方法去实现。

此外，还有一个细节需要说明：我们使用Positioned组件的left和top属性来小圆球的坐标，它们表示小圆球的左上角坐标为(left,top),注意是左上角，而不是圆心，此时小圆球的圆心与原点坐标(屏幕左上角)的直线距离可以通过以下方法计算出来:取（left*left + top*top）值的平方根再加上小圆球的半径。这个计算方法的核心思路是数学中的勾股定理。

看官们，与"跟手指移动的小球"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!