Flutter中两点或多点之间的垂直虚线

Question

我需要一点帮助来在不使用谷歌地图的多边形线的情况下绘制两点之间的虚线。 我尝试使用画布，它确实但不完全从位置下方和上方开始。

现在你可以看到 2 点以后它会超过 2 点。如果有人帮助我实现，我真的很感激。

Answer 1

我认为绘图比创建更多像上面这样的容器更有效。如果你不想使用这个库，你可以使用我下面的方法，只需添加几行：

创建类DashedLineVerticalPainter：

class DashedLineVerticalPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    double dashHeight = 5, dashSpace = 3, startY = 0;
    final paint = Paint()
      ..color = Colors.grey[300]
      ..strokeWidth = size.width;
    while (startY < size.height) {
      canvas.drawLine(Offset(0, startY), Offset(0, startY + dashHeight), paint);
      startY += dashHeight + dashSpace;
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

并使用它：

CustomPaint(
      size: Size(1, double.infinity),
      painter: DashedLineVerticalPainter()
   )

结果：

Answer 2

我使用https://pub.dev/packages/flutter_dash制作了外观几乎相同的小部件，您还可以根据自己的风格自定义此小部件。

这是代码，希望它有帮助。

  Column(children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(top: 16),
                    height: 25,
                    width: 25,
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border:
                            Border.all(width: 1.5, color: Colors.greenAccent)),
                  ),
                  Dash(
                      direction: Axis.vertical,
                      length: 130,
                      dashLength: 15,
                      dashColor: grey),
                  Container(
                    height: 25,
                    width: 25,
                    decoration: BoxDecoration(
                        shape: BoxShape.rectangle,
                        border: Border.all(width: 2, color: red)),
                    child: Container(
                      height: 20,
                    ),
                  ),
                ],
              ),