当前位置:  开发笔记 > 编程语言 > 正文

在小部件之间画一条线

如何解决《在小部件之间画一条线》经验,为你挑选了1个好方法。

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

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

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



1> creativecrea..:

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

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

要点的源代码

推荐阅读
LEEstarmmmmm
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有