在小部件之间画一条线

Question

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

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

是否可以通过诸如CustomPainter之类的绘画技巧或更改小部件的结构来做到这一点？

Answer 1

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

基本思想是拥有一个Stack，其中既包含您的框，又包含CustomPainter，它使您能够绘制出超出任何单个小部件约束的图形。在我的示例中，我不会拉直线并不能确保它们连接两个框，但是，您可以通过在框中提供GlobalKey并将这些键存储在全局列表中（例如，在InheritedWidget或提供者），然后将逻辑应用于(globalKey.currentContext.findRenderObject() as RenderBox).localToGlobal(Offset.zero)返回的位置。您也可以使用globalKey.currentContext.size这样访问框的大小。
但是，这对于回答来说可能有点太多，这就是为什么我只共享两个小部件之间绘制线条的基本上下文的代码的原因：

Source code as a Gist