说明
绘制一个圆环,进度为0时,显示"圆形"。
效果
源码
- MyRingPainter
dart
class MyRingPainter extends CustomPainter {
final double progress;
MyRingPainter({required this.progress});
@override
void paint(Canvas canvas, Size size) {
double _strokeWidth = 12;
double _halfWidth = size.width / 2;
Offset _center = Offset(_halfWidth, _halfWidth);
// 💡关键:找到真正的半径
// double _radius = _halfWidth; // 绘制的圆环会超过size的范围
double _radius = _halfWidth - _strokeWidth / 2; // 刚好卡在size范围内
// 圆环背景色
// 不填充圆内颜色
Paint paint = Paint()
..color = const Color(0xFFFF6258).withOpacity(0.12)
..strokeWidth = _strokeWidth
..style = PaintingStyle.stroke;
canvas.drawCircle(_center, _radius, paint);
//圆环进度
Paint linePaint = Paint()
..style = PaintingStyle.stroke
..strokeWidth = _strokeWidth
..strokeCap = StrokeCap.round // 线条末端样式为圆形
..color = const Color(0xFFFF6258);
// drawArc : 画弧形,但不连接圆心
canvas.drawArc(Rect.fromCircle(radius: _radius, center: _center), -pi / 2,
2 * pi * progress, false, linePaint);
}
@override
bool shouldRepaint(MyRingPainter oldDelegate) {
return oldDelegate.progress != progress;
}
}
- UI渲染
dart
Container(
width: 244,
height: 244,
color: Colors.grey.withOpacity(0.15),
child: CustomPaint(
size: const Size(244, 244),
painter: MyRingPainter(progress: 0.001),
),
)