在小部件之间画一条线

Question

在我的Flutter应用程序中，我想用一条线连接两个任意的盒子。
该示例示出了两个MyBoxes在GridView。

我想从左侧的MyBox滑动到右侧的MyBox，并在它们之间的空间中画一条线以显示连接。
但是，我找不到在小工具边框之外画线的方法。

有没有办法通过CustomPainter等绘画技巧或更改小部件的结构来做到这一点？

Answer 1

我认为这可能是一个不错的挑战，所以我只是使用创建了一个最小的可行示例CustomPainter。就个人而言，我总是会RenderObject使用LeafRenderObjectWidget和的自定义RenderBox，但是，CustomPainter应该更容易，这就是为什么我将在本示例中使用它。

基本的想法是有一个Stack同时包含您的框和的CustomPainter，这使您能够绘制出任何单个小部件之外的限制。在我的示例中，我不会拉直线并不能确保它们连接两个框，但是，您可以通过GlobalKey在框中提供，将这些键存储在全局列表中（例如，在InheritedWidget或Provider中）来轻松添加此行。然后将逻辑应用于所返回的位置(globalKey.currentContext.findRenderObject() as RenderBox).localToGlobal(Offset.zero)。您也可以使用来访问这样的盒子尺寸globalKey.currentContext.size。
但是，这对于一个答案来说可能有点太多，这就是为什么我只共享两个小部件之间绘制线条的基本上下文的代码的原因：

要点的源代码