Flutter：在屏幕上拖动小部件（不是拖放）答案

【问题标题】：Flutter : Drag Widgets across screen (Not Drag and Drop)Flutter：在屏幕上拖动小部件（不是拖放）
【发布时间】：2021-09-09 10:02:08
【问题描述】：

我只想在屏幕上拖动小部件，而不是拖放。

但是，每当我离开它并再次开始拖动时，它就会从开始的位置开始拖动。好像是reset。

我的猜测是 build 被一次又一次地调用，所以它会自动使用original position values。我该如何解决？代码应该是什么？

换句话说，position 在DragEvent 结束后设置为(100, 100)。然后下一次拖动从(100, 100) 开始，而不是最后一个位置小部件被拖放到。

我也用GlobalPosition 尝试过这个，但得到了相同的结果。这是我的代码：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  double x1 = 100.0;
  double x2 = 200.0;
  double y1 = 100.0;
  double y2 = 200.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Drag widget on screen'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: x1,
            top: y1,
            child: GestureDetector(
              onHorizontalDragUpdate: (details) {
                setState(() {
                  x1 = details.localPosition.dx;
                  y1 = details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.amber,
              ),
            ),
          ),
          Positioned(
            left: x2,
            top: y2,
            child: GestureDetector(
              onHorizontalDragUpdate: (details) {
                setState(() {
                  x2 = details.localPosition.dx;
                  y2 = details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

你的预期输出是什么？
@anirudh 我得到了我的预期输出，只是一旦DragEvent 结束，小部件就会重置它们的位置。
this 回答你的问题了吗？
@anirudh 您分享的帖子的回复与该人的问题无关，但它对我有用！谢谢！
哈哈不错，希望对你有帮助

标签： flutter dart flutter-state flutter-android flutter-positioned

【解决方案1】：

  double x1 = 100.0, x2 = 200.0, y1 = 100.0,
  y2 = 200.0, x1Prev = 100.0, x2Prev = 200.0, y1Prev = 100.0,
  y2Prev = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Drag widget on screen'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: x1,
            top: y1,
            child: GestureDetector(
              onPanDown:(d){
                x1Prev = x1;
                y1Prev = y1;
              },
              onPanUpdate: (details) {
                setState(() {
                  x1 = x1Prev + details.localPosition.dx;
                  y1 = y1Prev + details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.amber,
              ),
            ),
          ),
          Positioned(
            left: x2,
            top: y2,
            child: GestureDetector(
               onPanDown:(d){
                x2Prev = x2;
                y2Prev = y2;
              },
              onPanUpdate: (details) {
                setState(() {
                  x2 = x2Prev + details.localPosition.dx;
                  y2 = y2Prev + details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

【讨论】：