Flutter 连接节点/小部件图

Question

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

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

Answer 1

我能想到创建这样一个 View 的唯一方法有点复杂(可能是错误的)如果有人知道任何包或简单的小部件或其他方法来做到这一点，请告诉我。

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

1) You have to build a container or any widget to hold whatever data there is in the node.

2) You have to find the coordinates of each of this nodes using a function say getOffset(). To do this I found a good youtube tutorial Video to find position and size of a widget. Its actually quite simple(after i saw the tutorial) you have to create a key for each node and pass it as the key parameter to the node widget and use the initstate funtion to create a function which uses the _newBox = _theKeyYouCreated.currentContext.findRenderObject() to find that object

3) Then use _newBox.localToGlobal(Offset.zero) to get the location of the object.

4)Now say you got all the location of the containers now just use this locations to draw some line between these container.If you want some more beautiful right angled straight line you can first go to through the y axis then draw the x axis(of course some extra distance to compensate for the width and heights of widgets is to be used)

5)Drawing lines between two co-ordinates is a pretty straight forward thing with

canvas.drawLine(p1, p2, paint);

6)Now if you manage to do this for all pairs of nodes You are done.

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