可拖动项目总是下降大约 80 像素

Posted 2023-02-23

【中文标题】可拖动项目总是下降大约 80 像素

【英文标题】：Draggable item always goes down by around 80px

【发布时间】：2019-06-07 09:16:07

【问题描述】：

我对可拖动项目有奇怪的行为。

每次我将它拖到我的堆栈上时，它都会从放置位置下降大约 80 像素（这是一个近似值，如果使用另一部手机，它可能是其他东西）。 x 值对我来说似乎没问题。

代码如下：

class GesturePage extends StatefulWidget 
  @override
  _GesturePageState createState() => _GesturePageState();


class _GesturePageState extends State<GesturePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Gesture"),
      ),
      body: Stack(
        children: <Widget>[
          DragBox(Offset(0.0, 80.0)),
        ],
      ),
    );
  


class DragBox extends StatefulWidget 
  final Offset initPosition;    
  DragBox(this.initPosition);

  @override
  DragBoxState createState() => DragBoxState();


class DragBoxState extends State<DragBox> 
  Offset position = Offset(0.0, 0.0);

  @override
  void initState() 
    super.initState();
    position = widget.initPosition;
  

  @override
  Widget build(BuildContext context) 
    return Positioned(
      left: position.dx,
      top: position.dy - 80.0,
      child: Draggable(
        data: widget.itemColor,
        child: Container(
          child: Image.asset('images/item.png'),
        ),
        onDraggableCanceled: (velocity, offset) 
          setState(() 
            position = offset;
          );
        ,
        feedback: Container(
          child: Image.asset('images/item.png'),
        ),
      ),
    );
  

有人知道发生了什么吗？

另外，有没有办法在拖动项目时能够实时查看 x 和 y 坐标？

编辑： 在源代码中查找 80.0。这解决了我的问题，但仅适用于一种模拟器类型。还有一个有趣的代码here

【参考方案1】：

是的，事情很简单。您在 y 轴上的 80 差异包括

24 px = For Status bar
56 px = For App bar / Navigation bar

Total = 80 px

那是因为您正在接收全局位置，您需要将其转换为本地位置。这是你应该做的。

RenderBox referenceBox = context.findRenderObject();
Offset localPosition = referenceBox.globalToLocal(yourGlobalOffset);

编辑：

将您的Positioned 设为Stack 的子代。

用我的替换你的

onDraggableCanceled: (velocity, offset) 
  setState(() 
    RenderBox renderBox = context.findRenderObject();
    _position = renderBox.globalToLocal(offset);
  );
,

【讨论】：

嗨@CopsOnRoad，我有点迷路了。我试图在 onDraggableCanceled 中添加你的 2 行，将 'yourGlobalOffset' 更改为 'offset' 并分配给 'position' 偏移值。这是最糟糕的！我知道我需要使用 2 行，但我似乎没有正确使用它们。

嗨@CopsOnRoad，它可以部分工作。我有 2 张图片。一个在 (0.0, 0.0)，另一个在 (200.0, 0.0)。如果移动第一个，一切都是完美的，但是当将第二个向下移动到 Y 轴时，Y 值是正确的，但是 X 变为接近 0.0！然后，之后，我可以完美地移动两者！有没有想过为什么 globalToLocal 会拧第二个图像 X 值？再次感谢！

感谢@CopsOnRoad。你明白了！

我必须在上一个答案（differenceY 和 isChecked，如果你记得的话）中做一些技巧，因为我使用了你的帖子，它在小部件树的顶部有 Positioned。然后我不得不调试，发现Positioned需要放在Stack中。