Flutter LongPressDraggable 反馈位于容器的左上角而不是手指按下位置

Question

我是 flutter 的新手，我正在尝试创建一个容器，当用户长按它时 - 一个可拖动的圆圈表明用户可以在容器的边界内移动。

我尝试了很多解决方案，但得出的结论可能是实现此目的的最佳方法是在容器上使用 LongPressDraggable 小部件，并将反馈设置为用户可以拖动的圆圈。问题是当我长按容器时，圆圈出现在容器的左上角而不是按下的位置。我也试过加feedbackOfsset但是没有用（根本没有移动反馈位置，不知道为什么）。同样根据文档示例，这应该按预期工作并显示正确位置的反馈。

我的代码：

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Color.fromRGBO(239, 223, 224, 1.0),
        body: Center(
          child: Container(
            width: 230,
            height: 200,
            color: Colors.purple,
            child: LongPressDraggable<String>(
              feedback: Container(
                width: 80,
                height: 80,
                decoration: BoxDecoration(
                    color: const Color.fromRGBO(0, 0, 0, 0.6),
                    shape: BoxShape.circle,
                    border: Border.all(
                        width: 2,
                        color: const Color.fromRGBO(255, 255, 255, 0.8)
                    )
                ),
              ),
              child: Container(
                decoration: const BoxDecoration(
                    color: Colors.blue,
                    shape: BoxShape.circle,
                ),
              ),
            ),
          ),
        )
      )
    );
  }

要清楚 - 包装器容器是必需的，因为我在子容器中添加 Stack（在本例中只是将其删除）

结果：（为了这个例子，我把包装容器涂成了紫色）

Answer 1

好吧，为了到达中心或手指所在的位置，我们调用属性 :

dragAnchorStrategy : 此可拖动对象使用的策略，用于在拖动时获取锚点偏移量。

然后我们只 return Offset 两者的值为 40 因为它是 80 的一半（Container 大小), 如果你喜欢尝试输入 0,0 或 80,80 以查看差异。

 body: Scaffold(
    backgroundColor: const Color.fromRGBO(239, 223, 224, 1.0),
    body: Center(
      child: Container(
        width: 230,
        height: 200,
        color: Colors.purple,
        child: LongPressDraggable<int>(
          dragAnchorStrategy:
              (Draggable<Object> _, BuildContext __, Offset ___) =>
                  const Offset(40, 40), // here
          feedback: Container(
            width: 80,
            height: 80,
            decoration: BoxDecoration(
              color: const Color.fromRGBO(0, 0, 0, 0.6),
              shape: BoxShape.circle,
              border: Border.all(
                width: 2,
                color: const Color.fromRGBO(255, 255, 255, 0.8),
              ),
            ),
          ),
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.blue,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ),
    ),
  ),

Flutter LongPressDraggable 反馈位于容器的左上角而不是手指按下位置

Flutter LongPressDraggable feedback positioned at top left of a container instead of finger press position

draggable

dart

flutter