flutter - 在小部件之间画一条线

Question

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

我想从左边的 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 访问您的盒子的大小.
然而，这对于一个答案来说有点太多了，这就是为什么我将只分享两个小部件之间绘制线条的基本上下文的代码:

Source code as a Gist