Flutter中能否追踪元素位置并实现类似Figma的测量显示？

可用第三方包 #

• flutter_layout_editor：支持在Stack中拖拽调整组件，实时显示组件间的距离、自身尺寸等测量标注，完全契合你需要的Figma式效果。只需将目标组件嵌套进该包提供的编辑器组件，开启测量显示即可快速启用功能。
• flutter_design_editor：聚焦UI设计预览场景，支持在Stack布局下展示元素的坐标、间距和尺寸信息，同时支持拖拽调整组件位置，适合布局验证阶段的测量需求。

手动实现核心思路 #

如果不想依赖第三方包，可自行实现核心逻辑：

1. 给Stack内的子组件绑定GlobalKey，通过GlobalKey.currentContext.findRenderObject()获取RenderBox对象，再用localToGlobal()方法获取组件在屏幕中的绝对位置和尺寸。
2. 计算组件间的间距：水平间距=右侧组件的左边界坐标 - 左侧组件的右边界坐标；垂直间距=下方组件的上边界坐标 - 上方组件的下边界坐标。
3. 使用Positioned组件在对应间距位置绘制文本，展示计算出的测量数值。

相关示例参考 #

• 部分Flutter UI调试类Demo应用（如官方UI Playground的衍生项目）包含类似功能，用于演示布局测量与调试能力。
• 开源Flutter原型设计工具中，不少支持在编辑模式下显示组件间的测量标注，帮助对齐UI细节。

内容的提问来源于stack exchange，提问作者Maxime Biloa