Flutter的小部件连接节点/图

Question

开始创建类似这样的最佳方法是什么：

https://codepen.io/agiudiceandrea/pen/xeEEox

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

Answer 1

我想创建这种视图的唯一方法是有点复杂（可能是错误的）。如果有人知道任何软件包或简单的小部件或其他实现方法，请启发我。

颤动的核心特征是代码的可重用性，但可悲的是，直到现在为止，还没有人以我认为的方式创建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）现在，如果您设法对所有节点对都执行此操作，则操作完成。

似乎需要做很多工作。我认为没有任何软件包可以做到这一点。如果您要执行此操作，只需将其设置为可重用的形式并将其发布。我肯定会在当前项目之后尝试实现此功能。