Flutter Connected Node/Graph 小部件

Posted 2023-02-23

【中文标题】Flutter Connected Node/Graph 小部件

【英文标题】：Flutter Connected Node/Graph of Widgets

【发布时间】：2019-08-28 19:23:24

【问题描述】：

开始创建这样的东西的最佳方法是什么：

我可能会将第二行和第四行创建为水平滚动列表，第一行和第三行只是带有两张卡片的行；但是如何在两个小部件之间画一条线或连接它们呢？

【问题讨论】：

您找到解决方案了吗？我会使用自定义画家并绘制图形......但我不知道这是一个很好的解决方案。如果有人可以用平移和缩放来举例子，我会很好

这可以通过 Stack Widget、CustomPainter 和画布手动完成。但它不会是动态的。

动态是什么意思？我找到了这个库：github.com/Team-Blox/GraphView 但这仅适用于 android，不适用于颤振

@wwwwwwwwwwww，我猜这里的动态将是在运行时传递每个级别的节点数，以在每次运行时使用可能不同的数据动态创建图形。我还没有找到解决方案，但下面的答案看起来很有希望（看起来还需要做很多工作）。

【参考方案1】：

我能想到创建这样一个视图的唯一方法有点复杂（可能是我错了）如果有人知道任何包或简单的小部件或其他方法，请赐教。

flutter 的核心特性是代码的可重用性，但遗憾的是直到现在还没有人按照我的想法创建 GraphView……我不打算在这里实现它，我肯定会尽快尝试一下. 虽然我会分享我认为实施它的方式以及这样做所需的步骤。

1) 您必须构建一个容器或任何小部件来保存任何数据 节点中有。

2) 您必须使用 函数说 getOffset()。为此，我找到了一个很好的 youtube 教程 Video to find position and size of a widget。它实际上相当 简单（在我看到教程之后）你必须为每个创建一个密钥 节点并将其作为关键参数传递给节点小部件并使用 initstate 函数创建一个函数，该函数使用_newBox = _theKeyYouCreated.currentContext.findRenderObject() 来查找该对象

3) 然后使用_newBox.localToGlobal(Offset.zero) 获取位置 对象。

4）现在说你得到了容器的所有位置，现在只需使用它 在这些容器之间画一条线的位置。如果你想要一些 更漂亮的直角直线你可以先穿过 y轴然后绘制x轴（​​当然还有一些额外的距离 补偿要使用的小部件的宽度和高度）

5) 在两个坐标之间画线非常简单

canvas.drawLine(p1, p2, paint);

6）现在，如果您设法为所有节点对执行此操作，您就完成了。

看起来工作量很大。我认为没有包可以做到这一点。但肯定是时候做一个了。如果您设法做到这一点，只需将其制成可重用的形式并发布它。我肯定会在我当前的项目之后尝试实现它。

【讨论】：

节点是普通的颤振小部件容器吗？缩放和平移呢？我可以用 GestetureDetector 做到这一点吗？

用一个可缩放的小部件（例如来自pub.dev/packages/zoom_widget的缩放小部件）包裹整个事物