说明
绘制一个圆环，进度为0时，显示“圆形”。
效果
源码
- MyRingPainter
class MyRingPainter extends CustomPainter {final double progress;MyRingPainter({required this.progress});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);}bool shouldRepaint(MyRingPainter oldDelegate) {return oldDelegate.progress != progress;}
}
- UI渲染
Container(width: 244,height: 244,color: Colors.grey.withOpacity(0.15),child: CustomPaint(size: const Size(244, 244),painter: MyRingPainter(progress: 0.001),),)
