Flutter : Canvas 不显示 Arc

Question

我正在尝试创建一个加载器。所以 CustomPaint 我创建了一个弧线：

class ArcPainter extends CustomPainter {
  final double radius;
  ArcPainter({
    this.radius = 5,
  });

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 5.0
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke;
    Rect rect = Rect.fromCenter(
        center: size.center(Offset.zero),
        width: size.width / radius,
        height: size.height / radius);
    canvas.drawArc(rect, pi / 4, pi / 2, false, paint);
    canvas.drawArc(rect, -pi / 4, -pi / 2, false, paint);
  }

  @override
  bool shouldRepaint(ArcPainter old) {
    return false;
  }
}

我是这样使用的：

  Widget build(BuildContext context) {
    return Material(
      child: Container(
        child: AnimatedBuilder(
          animation: _animationController,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animationController.value * 4.0 * pi,
              child: Stack(
                children: [
                  Align(
                    alignment: Alignment.center,
                    child: CustomPaint(
                      painter: ArcPainter(radius: _animation.value),
                    ),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );

这是initState方法：

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 3000));
    _animation = Tween(begin: 5.0, end: 3.0).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
    );
    _animationController.repeat();

    super.initState();
  }

但是当我运行代码时没有任何反应？我希望在我的 canvas 上显示一条弧线！！！我的代码有什么问题？

Answer 1

您需要为 CustomPaint canvas 提供要绘制的尺寸。请查看下面的工作代码或直接运行 DartPad https://dartpad.dev/b97f99f5bcc7b1649c51f614fa6799b4 上的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  Animation _animation;

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 3000));
    _animation = Tween(begin: 5.0, end: 3.0).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.easeIn),
    );
    _animationController.repeat();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: AnimatedBuilder(
        animation: _animationController,
        builder: (context, child) {
          return Transform.rotate(
            angle: _animationController.value * 4.0 * 3.14,
            child: Stack(
              children: [
                Center(
                  child: Container(
                    width: 150,
                    height: 150,
                    child: CustomPaint(
                      painter: ArcPainter(radius: _animation.value),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

class ArcPainter extends CustomPainter {
  final double radius;
  ArcPainter({
    this.radius = 5,
  });
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.black
      ..strokeWidth = 5.0
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke;
    Rect rect = Rect.fromCenter(
        center: size.center(Offset.zero),
        width: size.width / radius,
        height: size.height / radius);
    canvas.drawArc(rect, 3.14 / 4, 3.14 / 2, false, paint);
    canvas.drawArc(rect, -3.14 / 4, -3.14 / 2, false, paint);
  }

  @override
  bool shouldRepaint(ArcPainter old) {
    return true;
  }
}

Flutter : Canvas 不显示 Arc

Flutter : Canvas does not display Arc

flutter

flutter-animation