dart 如何创建带有自定义边框描边的抖动百分比指示器

yeotifhr  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(162)

我打算在我的应用程序中制作这个小部件,但我不知道如何做到这一点。

我怎样才能做到这一点呢?我在Flutter中尝试过percent_indicator包,但主要问题是我们的选项有限。

dldeef67

dldeef671#

将虚线边框绘制到this answer的功劳

class DashedProgressIndicator extends CustomPainter {
  final double percent;
  final double strokeWidth;

  DashedProgressIndicator({ this.percent = 0, this.strokeWidth = 5});

  final paint1 = Paint()
    ..color = Colors.grey[300]!
    ..style = PaintingStyle.stroke;

  final paint2 = Paint()
    ..color = Colors.grey
    ..style = PaintingStyle.stroke
    ..strokeCap = StrokeCap.round;

  @override
  void paint(Canvas canvas, Size size) {
    Offset center = Offset(size.width / 2, size.height / 2);
    double radius = min(size.width / 2, size.height / 2);

    final dashSize = (size.width *0.0004) / 2;
    double arcAngle = 2 * pi * dashSize;

    // draw dashes
    for (var i = 0; i < 24; i++) {
      final init = (-pi / 2)*(i/6);

      canvas.drawArc(
          Rect.fromCircle(center: center, radius: radius - strokeWidth / 2),
          init, arcAngle, false, paint1..strokeWidth = strokeWidth);
    }

    // draw progress
    canvas.drawArc(
        Rect.fromCircle(center: center, radius: radius - strokeWidth / 2),
        (-pi / 2), 2 * pi * percent, false, paint2..strokeWidth = strokeWidth);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

用法:

CustomPaint(
  painter: DashedProgressIndicator(percent: 25/100),
  size: const Size(100, 100),
),

产量:

相关问题