天天看点

Flutter 自定义圆形进度条

Flutter 自定义圆形进度条
//进度条
class CircleProgressBar extends CustomPainter {
  Paint _paintBackground;
  Paint _paintFore;
  final double pi = 3.1415926;
  var progress; //0-360

  CircleProgressBar(this.progress) {
    _paintBackground = Paint()
      ..color = Colors.transparent
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..isAntiAlias = true;
    _paintFore = Paint()
      ..color = Color(BaseTheme.BASE_COLOR)
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..isAntiAlias = true;
  }

  updateProgress(int pg) {
    this.progress = pg;
    print(progress);
  }

  @override
  void paint(Canvas canvas, Size size) {
    //绘制流程
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2,
        _paintBackground);
    Rect rect = Rect.fromCircle(
      center: Offset(size.width / 2, size.height / 2),
      radius: size.width / 2,
    );
    canvas.drawArc(
        rect,
        -pi / 2, //圆开始的位置(正上方)
        360 * progress / 100 * 3.14 / 180,
        false,
        _paintFore);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    //刷新布局的时候告诉Flutter是否需要重绘
    return true;
  }
}