如何使用 Flutter 跳过带有 CustomPaint 的空格？答案

【问题标题】：How to skip spaces with CustomPaint with Flutter?如何使用 Flutter 跳过带有 CustomPaint 的空格？
【发布时间】：2022-07-27 12:44:13
【问题描述】：

我正在尝试在颤振中实现 ARC，但其中有“漏洞”。

我有什么： screen image

我想要的： achive image

我的代码：

class ProgressArc extends CustomPainter {
 bool isBackground;
  Color progressColor;
  double arcLength;
  ProgressArc({
    Key? key,
    required this.isBackground,
    required this.progressColor,
    required this.arcLength,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTRB(0, 0, 300, 300);
    final startAngle = -math.pi;
    final sweepAngle = arcLength;
    final useCenter = false;
    final paint = Paint()
      ..strokeCap = StrokeCap.round
      ..color = progressColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 20;

    var arc = canvas.drawArc(
      rect,
      startAngle,
      sweepAngle,
      useCenter,
      paint,
    );
    return arc;
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    throw UnimplementedError();
  }
}

你们知道我该怎么做吗？我正在尝试使用 CustomPaint，但接受其他方法我需要这个作为图表，图表库不支持我需要的这个图表。

【问题讨论】：

标签： flutter custom-painting custom-painter flutter-custompainter flutter-custompaint

【解决方案1】：

希望这仍然可以帮助您。

下面是画家类：

class ProgressArc extends CustomPainter {
  bool isBackground;
  Color progressColor;
  double arcLength;
  int dynamicPoint;
  double gapSize;

  ProgressArc({
    Key? key,
    required this.isBackground,
    required this.progressColor,
    required this.arcLength,
    required this.dynamicPoint,
    required this.gapSize
  });

  @override
  void paint(Canvas canvas, Size size) {
    const rect = Rect.fromLTRB(0, 0, 300, 300);
    final double gap = arcLength / 180 * gapSize;
    final double angle = arcLength / dynamicPoint;

    final Paint paint = Paint()
        ..color = progressColor
        ..strokeWidth = 20
        ..strokeCap = StrokeCap.round
        ..style = PaintingStyle.stroke;

    for (int i = 0; i < dynamicPoint; i++) {
      canvas.drawArc(
        rect,
        -(gap + angle * i), // remove "-" of startAngle and sweepAngle to draw bottom half circle instead of top half
        -(angle - gap * 2),
        false,
        paint);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    throw UnimplementedError();
  }
}

为了使用它，我为破折号的数量添加了 dynamicPoint，为 2 个破折号之间的间隙添加了 gapSize：

CustomPaint(painter: ProgressArc(
  isBackground: true,
  progressColor: Colors.black,
  arcLength: pi,
  dynamicPoint: 4,
  gapSize: 5.0
))

【讨论】：