Flutter Draggable 小部件，可以单击或拖动以移动到 DragTarget

Question

我正在尝试创建一个小测试，允许用户单击或拖动 Draggable 或 Container 将其移动到 DragTarget。我能想到的最好的例子是 Duolingo 如何允许用户单击一个单词并自动将其移动到某个目标的句子的第一个位置，然后应用程序检查顺序是否正确。

对于那些不熟悉 Duolingo 如何使用它的人，我将在这里解释我想要做什么。我想要 3 个 Draggable（将它们称为 A、B 和 C）和 3 个 DragTargets。单击某个字母时，它将移动到最左侧的空 DragTarget，但是，也可以将该字母拖动到该位置。如果在 DragTarget 内单击 Draggable，它将返回到其原始位置，或者可以拖动它以与另一个填充的 DragTarget 切换位置。

我希望这能很好地解释我的目标。如果没有，请询问更多详细信息，我可以尝试编辑并提供它们。

谢谢

Answer 1

在检测 Draggable 上的单击事件时，我遇到了类似的问题，同时仍然提供其余的拖动功能。我找到了一种解决方法，方法是检查拖动末尾的

DragDetails.velocity

并维护一个状态变量来检查元素是否被拖动。

代码示例：

onDragStarted: () {
  controller.wasCardDragged = false;
},
onDragEnd: (details) {
  if (details.velocity.pixelsPerSecond.dx == 0
      && details.velocity.pixelsPerSecond.dy == 0 
      && !controller.wasCardDragged) {
  // click event happened
  // add your click event here
}
                  },
onDragUpdate: (details) {
  controller.wasCardDragged = true;
},

当调用

onDragEnd

时速度为0且拖动过程中未触发

onDragUpdate

时，这基本上相当于点击事件。

希望这有帮助。

Answer 2

可行的方法是使用

onDragStarted: () {}

voidCallback，它类似于按钮单击。您可以使用 A

Stack()

并用

AnimatedPositioned()

小部件包装 Draggables。可以使用 If 语句确定要移动到哪个字段。