如何在Flutter的CustomPainter中绘制虚线？

Flutter 原生Canvas没有提供直接绘制虚线的API，下面是一个类似canvas.drawLine(Offset p1, Offset p2, Paint paint)的自定义虚线绘制方法，支持在任意两点间绘制虚线：

核心实现代码 #

void drawDashedLine(Canvas canvas, Offset p1, Offset p2, Paint paint, {double dashLength = 5, double gapLength = 5}) {
  // 计算两点间距离和角度
  final double distance = (p2 - p1).distance;
  if (distance == 0) return;

  final double angle = atan2(p2.dy - p1.dy, p2.dx - p1.dx);
  
  // 计算每一段虚线+间隔的总长度
  final double segmentLength = dashLength + gapLength;
  // 总共有多少个完整的段
  final int count = (distance / segmentLength).floor();
  
  Offset currentOffset = p1;
  
  // 绘制完整的虚线段
  for (int i = 0; i < count; i++) {
    final Offset nextOffset = currentOffset + Offset(cos(angle) * dashLength, sin(angle) * dashLength);
    canvas.drawLine(currentOffset, nextOffset, paint);
    currentOffset = currentOffset + Offset(cos(angle) * segmentLength, sin(angle) * segmentLength);
  }
  
  // 绘制剩余的最后一段（如果有）
  final double remainingDistance = distance - count * segmentLength;
  if (remainingDistance > 0) {
    final Offset nextOffset = currentOffset + Offset(cos(angle) * remainingDistance, sin(angle) * remainingDistance);
    canvas.drawLine(currentOffset, nextOffset, paint);
  }
}

使用示例 #

在CustomPainter的paint方法中调用：

class DashedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 2;
    
    // 绘制从(50,50)到(250, 150)的虚线
    drawDashedLine(
      canvas,
      const Offset(50, 50),
      const Offset(250, 150),
      paint,
      dashLength: 8, // 自定义虚线线段长度
      gapLength: 4, // 自定义间隔长度
    );
  }

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

代码说明 #

• 通过计算两点间的距离和角度，将整条线拆分为多个"线段+间隔"的单元
• 循环绘制每个完整的线段单元，最后处理剩余的不足一个单元的长度
• 可以通过dashLength和gapLength参数自定义虚线的样式

内容的提问来源于stack exchange，提问作者AlienKevin