颤振等效于 DocumentOrShadowRoot.elementFromPoint()

Question

我想知道 flutter 中 web api DocumentOrShadowRoot.elementFromPoint() 的等价物是什么。

具体来说，我想知道在给定偏移量的情况下，如何确定小部件层次结构中的叶元素/小部件实例是什么。

例如，考虑以下结构：

对于标有黑圈的 First Offset，我希望得到某种数据，可以帮助我确定偏移量是否超过 Container。

对于标有黑圈的第二次偏移，我希望堆栈。

对于最后一个，它将是定位元素。

一点背景

我正在探索在 Flutter 中实现类似于 FIGMA 的可视化编辑器。我有使用 Web 技术实现此类渲染系统的经验。

我想在每个元素上发生点击/点击时呈现选择指示器或轮廓。这些元素是嵌套的。添加多个嵌套的事件处理程序会触发所有这些事件处理程序。例如，将鼠标移到 Stack 或 Positioned 元素上时，鼠标进入和鼠标离开也会触发所有父事件处理程序。

任何帮助或指导将不胜感激。

Answer 1

您的确切问题的简单答案：没有直接的等价物。可以实施但不可取。

通过查看 GestureBinding 在 Flutter 中的工作原理，您理论上可以实现自己的 elementFromPoint() 版本。这肯定是一个深入的研究，你可能会从中学习，但有一个更简单的解决方案。即使您实现了自己的方法，当找到 1 个以上的元素时，您仍然需要解决冲突——这是 Flutter 通过手势领域开箱即用的解决方案。

我看到您希望报告最顶层或最深的子级，您可以使用 GestureDetector 小部件获得此信息。您正在寻找的是让您的手势检测器opaque。 GestureDetector 有一个名为 behaviour 的属性，类型为 HitTestBehaviour。它的默认值为 deferToChild。以下是可能的值：

/// How to behave during hit tests.
enum HitTestBehavior {
  /// Targets that defer to their children receive events within their bounds
  /// only if one of their children is hit by the hit test.
  deferToChild,

  /// Opaque targets can be hit by hit tests, causing them to both receive
  /// events within their bounds and prevent targets visually behind them from
  /// also receiving events.
  opaque,

  /// Translucent targets both receive events within their bounds and permit
  /// targets visually behind them to also receive events.
  translucent,
}

以下内容略有相关，因此请深入了解您的用例

既然您要沿着这条路走下去：我还构建了一个 WYSIWYG 设计系统，带有选择指示器、用于旋转、调整大小等的手柄，并有一个建议：将您的设计渲染与手势检测器和选择指示器完全分开。

我最初将手势检测器置于设计元素“周围” - 在您的示例中，手势检测器位于黄色/蓝色/绿色/红色之间。这是一个坏主意的原因是它使一些事情复杂化。在某些情况下，我需要创建比设计元素本身更大的触摸区域，在这种情况下，我需要添加填充并重新定位 GestureDetector 父项。在其他情况下，设计元素会变得固定或锁定，并且不会有 GestureDetector 父元素，并且 Flutter 会完全重建层的内容，因为树比较会混淆。它很快就会变得凌乱。所以，堆叠这些层：

1. 底部设计，无交互性。
2. 选择指示器，调整大小/旋转手柄。仍然没有互动
3. 适用于所有设计元素的手势检测器。如果幸运的话，您可以知道设计元素的确切大小、位置和旋转方式，只需使用 Positioned。如果您有一组设计元素，那么您的手势检测器也会被分组和转换在一起。如果您也有自行调整大小的设计元素（如图像），它会变得有点复杂，但我通过将设计元素添加为一个不可见的孩子来解决我的问题。我现在这样做的方法是加载有关图像的元数据并在构建时了解它们（而不是等待图像加载并产生布局更改）。
4. 选择指示器 + 调整大小/旋转处理手势检测器。它们位于最顶端，也不透明，因此它们可以捕捉到所有撞击它们的东西。

此设置允许您在手势部门进行更多实验，它允许您使用彩色框进行调试，并且通常会让您的生活更轻松。

TLDR：使用 opaque 手势检测器。