我打算在我的应用程序中制作这个小部件,但我不知道如何做到这一点。
我怎样才能做到这一点呢?我在Flutter中尝试过percent_indicator包,但主要问题是我们的选项有限。
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), ),
产量:
1条答案
按热度按时间dldeef671#
将虚线边框绘制到this answer的功劳
用法:
产量: