在我的 Flutter 应用程序中，我想用一条线连接两个任意框。
该示例在 GridView 中显示了两个 MyBoxes。
我想从左侧的 MyBox 滑动到右侧的 MyBox，并在它们之间的空间中画一条线以显示连接。
但是，我找不到在小部件边框之外绘制线条的方法。
有没有办法通过像 CustomPainter 这样的绘图技巧或改变小部件的结构来做到这一点？
【问题讨论】：
标签： flutter dart flutter-layout
我认为这可能是一个不错的挑战，所以我只是使用CustomPainter 创建了一个最小可行示例。就个人而言，我总是使用自定义的RenderObject 和LeafRenderObjectWidget 和RenderBox，但是，CustomPainter 应该更容易，这就是为什么我将在这个例子中使用它.
基本的想法是有一个Stack 包含你的盒子和CustomPainter，它允许你在任何单个小部件的约束之外进行绘制。在我的示例中，我没有拉直线条，也没有确保它们连接两个盒子，但是，您可以通过向您的盒子提供 GlobalKey 来轻松添加它，将这些键存储在全局列表中（例如，在 @ 987654327@ 或 Provider），然后对(globalKey.currentContext.findRenderObject() as RenderBox).localToGlobal(Offset.zero) 返回的位置应用一些逻辑。您还可以使用 globalKey.currentContext.size 访问这样的框的大小。
然而，这对于一个答案来说有点过分了，这就是为什么我将只共享两个小部件之间绘制线条的基本上下文的代码：
【讨论】：
Stack 和 CustomPainter 的组合对我非常有用。我想用 MyBox 的位置画一条线，所以我目前正在尝试使用GlobalKey 来访问位置信息。一旦我们成功，我将标记这个答案。 （我目前正在处理Duplicate GlobalKey的错误。）
MyBox 都应该是唯一的，所以您必须使GlobalKey 唯一（否则您将无法从GlobalKey 中获得不同的小部件）。你可以例如使用索引来区分不同的框。
InheritsWidget 中，并通过计算从GlobalKey 到GridView 的网格大小和坐标来绘制线。而且，我还了解了 Flutter 如何与 Key 一起工作，并且我完全理解了它的结构。非常感谢！