Flutter 连接节点/小部件图

Question

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

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

Answer 1

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

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

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

2）您必须使用 getOffset() 函数找到每个节点的坐标。为此，我找到了一个很好的 YouTube 教程 视频来查找小部件的位置和大小。它实际上非常简单（在我看到教程之后），您必须为每个节点创建一个键并将其作为键参数传递给节点小部件，并使用 initstate 函数创建一个使用 来查找_newBox = _theKeyYouCreated.currentContext.findRenderObject()该对象的函数

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

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

5）在两个坐标之间画线是一件非常简单的事情

canvas.drawLine(p1, p2, paint);

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

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