如何在Flutter中实现带弧度的虚线边框？已尝试dotted包未果

如果dotted包没法满足圆角虚线的需求，直接用CustomPaint是最灵活的方案，以下是完整实现代码：

自定义圆角虚线画笔 #

class RoundDashedBorderPainter extends CustomPainter {
  final Color color;
  final double strokeWidth;
  final double dashLength;
  final double gapLength;
  final double borderRadius;

  RoundDashedBorderPainter({
    required this.color,
    this.strokeWidth = 1.0,
    this.dashLength = 4.0,
    this.gapLength = 4.0,
    required this.borderRadius,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..strokeWidth = strokeWidth
      ..style = PaintingStyle.stroke;

    // 创建带圆角的矩形路径
    final rRect = RRect.fromRectAndRadius(
      Rect.fromLTWH(0, 0, size.width, size.height),
      Radius.circular(borderRadius),
    );
    final path = Path()..addRRect(rRect);

    // 获取路径的度量信息，拆分路径绘制虚线
    final pathMetrics = path.computeMetrics();
    for (final metric in pathMetrics) {
      double distance = 0.0;
      final totalLength = metric.length;
      while (distance < totalLength) {
        final start = distance;
        final end = distance + dashLength;
        final segment = metric.extractPath(start, end > totalLength ? totalLength : end);
        canvas.drawPath(segment, paint);
        distance += dashLength + gapLength;
      }
    }
  }

  @override
  bool shouldRepaint(covariant RoundDashedBorderPainter oldDelegate) {
    return color != oldDelegate.color ||
        strokeWidth != oldDelegate.strokeWidth ||
        dashLength != oldDelegate.dashLength ||
        gapLength != oldDelegate.gapLength ||
        borderRadius != oldDelegate.borderRadius;
  }
}

使用示例 #

将自定义画笔放入CustomPaint中，即可给任意Widget添加圆角虚线边框：

Container(
  width: 200,
  height: 100,
  child: CustomPaint(
    painter: RoundDashedBorderPainter(
      color: Colors.grey,
      strokeWidth: 1.5,
      dashLength: 6.0,
      gapLength: 3.0,
      borderRadius: 16.0,
    ),
    child: const Center(child: Text("带圆角的虚线边框")),
  ),
)

关键说明 #

• 用Path.addRRect生成带圆角的路径，确保虚线完全贴合圆角边缘
• 通过PathMetrics拆分路径，逐段绘制虚线，完美适配曲线部分
• 可通过调整dashLength（虚线长度）、gapLength（间隙长度）、borderRadius（圆角半径）等参数，精准匹配设计效果

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