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

Posted 2023-05-08

【中文标题】Flutter 可拖动的小部件，可以单击或拖动以移动到 DragTarget

【英文标题】：Flutter Draggable widget that can be clicked or dragged to move to DragTarget

【发布时间】：2021-10-01 09:43:42

【问题描述】：

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

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

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

谢谢

【参考方案1】：

可行的是使用onDragStarted: () voidCallback，它类似于单击按钮。您可以使用 A Stack() 并使用 AnimatedPositioned() 小部件包装 Draggables。可以使用 If 语句适当地确定要移动到哪个字段。