我试图在左上角创建四分之一环形状,但没有成功,需要帮助吗?
我试着创建一个带有边界半径的容器,然后给予它一个颜色边界,但是它没有像我预期的那样运行
fkaflof61#
您可以通过这种方式创建自定义圆环首先,你需要创建自定义类如下所示import 'dart:math' as math;
import 'dart:math' as math;
class MyCustomPainter extends CustomPainter { final learned; final notLearned; final range; final totalQuestions; double pi = math.pi; MyCustomPainter({this.learned, this.totalQuestions, this.notLearned, this.range}); @override void paint(Canvas canvas, Size size) { double strokeWidth = 7; Rect myRect = const Offset(-50.0, -50.0) & const Size(100.0, 100.0); var paint1 = Paint() ..color = Colors.red ..strokeWidth = strokeWidth ..style = PaintingStyle.stroke; double firstLineRadianStart = 0; double _unAnswered = (totalQuestions - notLearned - learned) * range / totalQuestions; double firstLineRadianEnd = (360 * _unAnswered) * math.pi / 180; canvas.drawArc( myRect, firstLineRadianStart, firstLineRadianEnd, false, paint1); double _learned = (learned) * range / totalQuestions; double secondLineRadianEnd = getRadians(_learned); canvas.drawArc(myRect, firstLineRadianEnd, secondLineRadianEnd, false, paint1); } double getRadians(double value) { return (360 * value) * pi / 180; } @override bool shouldRepaint(CustomPainter oldDelegate) => true; }
然后用以下方法调用该类
Stack( children: [ //Your body widget will be here CustomPaint( painter: MyCustomPainter( totalQuestions: 300, learned: 75, notLearned: 75, range: 10), ) ], ),
它看起来像这样
1条答案
按热度按时间fkaflof61#
您可以通过这种方式创建自定义圆环
首先,你需要创建自定义类如下所示
import 'dart:math' as math;
然后用以下方法调用该类
它看起来像这样