我想知道 Flutter 中的 web api DocumentOrShadowRoot.elementFromPoint() 是什么。
具体来说，我想知道在给定偏移量的情况下，我如何才能弄清楚小部件层次结构中的叶元素/小部件实例是什么。
例如，考虑以下结构：
对于标有黑圈的First Offset，我希望能得到一些数据来帮助我确定偏移量是否超过了Container。
对于标有黑圈的Second Offset，我希望是堆栈。
对于最后一个，它将是定位元素。
我正在探索在 Flutter 中实现类似于 FIGMA 的可视化编辑器。我有使用网络技术实现这种渲染系统的经验。
我想在每个元素上发生点击/单击时呈现选择指示器或轮廓。这些元素是嵌套的。添加多个嵌套事件处理程序会触发所有事件处理程序。例如，将鼠标移到 Stack 或 Positioned 元素上时，鼠标进入和离开也会触发所有父事件处理程序。
任何帮助或指导将不胜感激。
【问题讨论】：
标签： flutter
对您的确切问题的简单回答：没有直接的等价物。可以实施，但不可取。
通过查看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,
}
既然您要走这条路：我还构建了一个所见即所得的设计系统，其中包含选择指示器、用于旋转、调整大小等的手柄，并且有一个建议：将您的设计渲染与手势检测器和选择指示器完全分开。
我最初将手势检测器放置在设计元素“周围” - 在您的示例中，手势检测器将位于黄色/蓝色/绿色/红色之间。这是一个坏主意的原因是它使一些事情复杂化。在某些情况下，我需要创建比设计元素本身更大的触控区域，在这种情况下，我需要添加填充并重新定位 GestureDetector 父元素。在其他情况下，设计元素将变得固定或锁定，并且不会有 GestureDetector 父级，并且由于树比较混淆了，Flutter 将完全重建层的内容。它很快变得混乱。所以，堆叠这些层：
Positioned。如果您有一组设计元素，那么您的手势检测器也会被分组和转换在一起。如果你也有自定尺寸的设计元素（如图像），它会变得有点复杂，但我通过将设计元素添加为一个不可见的孩子来解决我的问题。我现在这样做的方法是加载有关图像的元数据并在构建时了解它们（而不是等待图像加载并产生布局更改）。然后，此设置允许您在手势部门进行更多实验，它允许您使用彩色框进行调试，总体上会让您的生活更轻松。
TLDR：使用opaque 手势检测器。
【讨论】：