问题标签 [dragtarget]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1793 浏览

flutter - Flutter Draggable - 如何将 Draggable 重置为起始位置?

更新:

查看底部的最新更新。

原来的

我有抖动的 Draggable 和 DragTarget 小部件正在工作,除了在我放置 DragTarget 后,我​​遇到了一种特殊情况,我想重建 DragTarget 并将 Draggable 移回其原始位置。

当我检查 Flutter 检查器时,它会显示我的小部件,但当我调用我的 Provider 以获取下一组信息时,Draggables 保持在它们的放置位置而不是返回到它们的起始位置。

如图像的最后一帧所示,三个目标帧仍包含对可拖动小部件的引用,但我在每次单击红色 IconButton 时重建 Draggable 和 DragTarget 小部件。

观察

  • 即使我使用 Consumer 将 Tiles 包装在父窗口小部件中,可拖动对象仍处于放置位置。
  • 消费者正在传递更改的数据值。

  • 使用 Flutter Inspector在我的小部件树中可以看到 DragTargets 。
  • 当我遇到一个拥有三个以上 Draggable 的事件时,
    拖放的 Draggable 会错位,而其他小部件的 Tiles 和 DropTargets 会按预期显示。

期望:

当我重置我的消费者数据时,我希望使用新数据在其原始位置重新绘制磁贴和目标。

draggable_behavior

拖动目标

可拖动

父小部件

更新的行为

请参阅下面的注释和第二个动画 gif,以将代码更改和新行为与上面的原始行为进行比较和对比。

将 UniqueKey 添加到 Targets 和 Tiles 后 - Tiles 错误地显示在其原始位置,目标正确显示。

我想做的是:

  • 让瓷砖显示在目标上的放置位置
  • 在不同的点击事件之后,将瓷砖和目标重新绘制在其原始位置。

注意 - 将以下代码应用于 Tile 和 Target 小部件。

唯一键更新

解决方案

感谢@LoVe 对使用 UniqueKey 的提醒以及对 Flutter 团队关于 Keys 的视频的回顾;我能够通过有条件地将 UniqueKey 添加到包含 Tiles 和 Target 的封闭行来解决该问题。

从这些小部件中的每一个中,我都能够使用(isSuccessful || widget.isPuzzleComplete). 我还能够从 Tile/Target 小部件和 setState 调用中删除与获取 isPuzzleComplete 逻辑相关的消费者逻辑。

目前,该行为是 100% 正确的。

参考

Flutter Team 使用 Keys 的视频(链接

0 投票
0 回答
257 浏览

flutter - 通过 Draggable&DragTarget 重新排序时如何保持我的小部件状态?

我正在使用这个reorderables包。这个包的工作原理是有一个子小部件列表,每个小部件都用Draggable包装并放在DragTarget中。在此之前 childs 键被分配给GlobalObjectKey
在创建 dragTarget 之后,它被分配(或重建?)到KeyedSubTree

dragTarget = KeyedSubtree(key: keyIndexGlobalKey, child: dragTarget);

根据包源代码中的注释,这应该在拖动时保留子小部件状态(toWrap):

// 我们将 toWrapWithGlobalKey 传递给 Draggable,这样当列表
项被拖动时,// 可访问性框架可以保留
拖动项的选中状态。
最终 GlobalObjectKey keyIndexGlobalKey = GlobalObjectKey(toWrap.key);

重新排序本身不是发生在 DragTarget 接受 Draggable 拖入其中的情况下,而是通过在每个子项周围使用 DragTarget 来获取 Draggable 悬停在当前位置的索引。当放开 Draggable 时,将调用一个重新排序函数,该函数从列表中删除(被拖动的)小部件并将其插入到新位置。

现在出现了我的问题:小部件的状态没有被保留。我做了一个简单的 TestWidget 来测试这个:

这个小部件有一个带有初始蓝色背景 (boxColor) 的容器和一个按钮。当按下按钮时,它会将 boxColor 更改为红色。开始拖动小部件的那一刻,它被重建并默认为初始状态(至少 Draggable 反馈是)。重新排序后不会更改并且小部件仍处于默认状态。

我的计划是列出不同的自定义小部件,用户可以在其中修改他们的内容,如果他们对订单不满意,他们可以拖动这些小部件并重新排列它们。

我的问题是:如何保留小部件的状态?

我正在考虑为每个带有所有状态相关变量的小部件创建一个类,并使用它来构建我的小部件,但这似乎非常臃肿,而且并不真正考虑到颤动。那不应该是StatefulWidget的状态的作用吗?

编辑:
所以我解决了我的问题,方法是使用ChangeNotifier为我的小部件状态创建一个额外的类,然后将我想要跟踪的所有变量移动到这个类中。所以我现在基本上有两个列表,一个用于可重新排序列表中的小部件,另一个用于它们的状态。我仍然认为这有点磨损。如果我的列表中的一个小部件有自己的其他子级,我需要为每个需要它的子级创建单独的状态类并将它们保存在某个地方。这会变得非常混乱,非常快。

0 投票
1 回答
75 浏览

flutter - 在 Flutter 中悬停在 Dragtarget 上时可拖动触发错误信息

我正在使用 Flutter 中的可拖动对象和拖动目标。我目前在我的项目中有两个拖动目标,一旦我将一个可拖动对象放在它们上面,它们都会正确响应。但是,一旦从 draggable1 到 dragtarget1 的第一次拖动完成,第二次拖动就会出现一个问题:当使用 draggable2 将鼠标悬停(未放置)在 dragtarget2 上时,会触发 onaccept 属性并使用 dragtarget1 的内容构建 dragtarget2。我不明白为什么。我将不胜感激任何帮助/提示!

我制作了一个简短的视频,直观地展示了这个问题:https ://youtu.be/IJa3oZ_7fw0

这是我的拖动目标代码:

0 投票
1 回答
121 浏览

flutter - 你能以编程方式将 Draggable 放在 DragTarget 中吗?

这听起来很奇怪!但我有两个拖动目标和两个可拖动对象。我希望他们在每个目标中开始一个。然后,当一个被拖放到第二个目标上时,第二个目标的可拖动对象需要跳转到第一个目标。

我想这个问题可以归结为您是否可以以编程方式将可拖动对象放入目标中。这看起来可行,还是 DragTarget 不合适?

一些示例代码 - 我无法在拖动目标中启动可拖动对象

0 投票
1 回答
146 浏览

flutter - Flutter:使用新的 Draggable 将鼠标悬停在 DragTarget 上时,它会显示错误的数据

我对开发还很陌生,从 web 开发开始,虽然现在和 Flutter 一起工作了大约 2 个月,这意味着我仍然学到很多东西——所以请多多包涵。

我目前正在研究拖放周期表。我已经有了一个工作版本,玩家可以在正确的位置放置一个元素(只有一个 DragTarget 接受 Draggable)。但是,我现在想制作一个高级版本,其中每个 DragTarget 接受每个 Draggable 并显示已放置元素的一些信息

我的问题是: 我可以将 DraggableElementTile 放在每个“空” DragTarget 上(如我所愿),但是当我将鼠标悬停在已经“有数据”的一个 DragTargets 上时,它会将文本更改为最后添加的文本(到不同的 DragTarget)。所以 Draggable 的数据没有“绑定”到 DragTarget,但我不知道如何解决它。

我进一步知道,在这段代码中,行中的下一个元素的数据显示在 onAccept 时的 DragTarget 中。我的完整代码不会发生这种情况,也许我在这里删除了一些东西。或者它指向某人的解决方案?

附带说明:最终,将检查元素是否在表格中的位置正确,因此 DragTarget 需要携带正确设置的信息(如我的初始版本)。

感谢任何有用的想法。

编辑:我想我需要将要显示的数据保存在一个新列表中,但是当我尝试实现它时仍然碰壁。

0 投票
1 回答
87 浏览

flutter - DragTarget 不使用自定义 Draggable (Flutter) 调用 onWillAccept

我正在尝试制作可拖动文本的标签,以便我可以将它们拖动到我拥有的 2 个 DragTarget 之一(理想情况下能够在 3 个 DragTarget 之间移动它们)。不幸的是,我不能让它们与 DragTargets 交互,因为它们甚至不调用 onWillAccept()。我的可拖动对象是 DragabbleTag 并扩展了 Draggable,而我的 dragTargets 位于 Stateful Widget 中并且应该接受它们。

自定义 DragTarget 'DraggableTagTarget'

自定义 Draggable 'DraggableTag' 我排除了不应该相关的 feedbackTag() 和 ghostTag

起初我的 draggableTag 正在扩展一个小部件,但看到一些类似的问题,我将其直接扩展为 Draggable 但它没有帮助

编辑:我在列表中的自定义 DialogWidget(有状态小部件)中将 ma 值分配给可拖动

解决方案:正如 ikerfah 解释的那样,我没有在 <> 中输入正确的类型,因为我对 DraggableTag 类是什么感到困惑。我创建了另一个类来包含数据标签,以便我的 DragTarget 和 DraggableTag 都使用这个类

0 投票
0 回答
40 浏览

flutter - 颤振 - 如何使用颤振可拖动/拖动目标将图像放置在图像内

大家好,我目前正在为我在大学的最后一个项目使用颤振开发一个拖动游戏。

图像的可拖动功能似乎运行良好(我使用抽屉放置图像)

dragTarget是放置在中心的图像子元素gestureDetector小部件

但问题是图像子级无法处理其中的另一个子级,idk 将dragTarget放置在图像内是否错误,或者旁边可能有另一个替代方案

我真的需要你的帮助,谢谢

0 投票
0 回答
137 浏览

flutter - 如何使用 Flutter 中的一些触发器/动作更改 carousel_slider 中的项目?

我无法用代码中的onAccept()之类的操作/触发器替换 carousel_slider 中的一组图像

我目前使用可拖动的滑块,我的目标是当我通过onAccept将图像拖动到dragTarget时,我想更改图像集

我怎样才能做到这一点?感谢您的帮助

这是 carousel_slider 代码:

这是滑块的实现:

这段代码似乎不像我想的那样工作

onAccept: (makanan) { setState(() { _listMakanan = _listLauk; });

感谢您的关注,非常感谢您的帮助

0 投票
1 回答
156 浏览

flutter - 如何在 DragTarget.onMove (Flutter) 中获取全局坐标?

我需要在里面找到可拖动的位置DragTarget.onMove。但是DragTargetDetails.offset我们有一些奇怪的价值观。在源代码中,我看到它设置为avatar._lastOffsetwhich is globalPosition - dragStartPoint。但是我无权访问其中任何一个来计算 DragTarget 中的全局位置或本地位置。文档说DragTargetDetails.offset是“在可拖动对象上发生特定指针事件时的全局位置。” 但实际上它是一个全局位置减去开始用药点,这似乎没用,我该如何使用该值?

我准备了一个简单的示例,您可以在其中看到偏移量Draggable.onDragUpdate(这是真正的全局位置)和DragTarget.onMove.

0 投票
0 回答
31 浏览

flutter - Flutter:如何获取 Draggable 的左上角?

如何获得拖动对象的左上角?

下面的代码可以直接在 web 中测试。它在渲染后打印尺寸和一些奇怪的(没用的?)翻译值。我想将矩形与网格对齐。