如何在虚线中绘制连接两个点的虚线

Question

我正在尝试实施以下设计。设计应在所有屏幕尺寸和方向上都受支持。我不确定如何绘制突出显示的部分，该部分将在所有屏幕中进行调整。

我尝试了以下操作：

• 用Row创建mainAxisAlignment: MainAxisAlignment.Center。
• 使用Row在三部分中划分Container。
• 包裹在中间的Container具有Flexible占用所有可用空间。使用borderRadius获得圆形的边界。
• 使用Container的transform属性将两个容器平移到边框的终点以下。

结果

但是，由于以下原因，上述想法不起作用：

• UI并未按照设计呈现。 z-index项不同。
• 中心容器具有完整的圆形边框。
• UI在不同方向上无法正确调整。

阅读论坛和博客后，我认为CustomPainter或ClipPath应该是不错的选择。非常感谢您的帮助。预先感谢。

Answer 1

我认为CustomPainter是最好的方法。这篇文章可以帮助您实现目标：https://stackoverflow.com/a/55862786/4800774

要获取起点和终点，可以使用渲染框获取全局位置。

GlobalKey nyPointKey = GlobalKey();
Point(key: nyPointKey);
RenderBox box = key.currentContext.findRenderObject();
Offset position = box.localToGlobal(Offset.zero);