如何在Flutter中创建四分之一环形状?

4xy9mtcn  于 2023-02-16  发布在  Flutter
关注(0)|答案(1)|浏览(176)

我试图在左上角创建四分之一环形状,但没有成功,需要帮助吗?

我试着创建一个带有边界半径的容器,然后给予它一个颜色边界,但是它没有像我预期的那样运行

fkaflof6

fkaflof61#

您可以通过这种方式创建自定义圆环
首先,你需要创建自定义类如下所示
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),
                  )
            ],
          ),

它看起来像这样

相关问题