Flutter:如何在CustomPainter对象中设置动态颜色

问题描述 投票:0回答:1

为CustomPainter的构造函数动态设置绘画颜色无效。

lines_painter.dart

class LinesPainter extends CustomPainter {
  final double lineHeight = 8;
  final int maxLines = 60;
  final Color customColor;

  LinesPainter(this.customColor);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.translate(size.width / 2, size.height / 2);

    canvas.save();
    final Paint linePainter = Paint()
      ..color = customColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.5;
    final radius = size.width / 2;

    List.generate(maxLines, (i) {
      var newRadius = (i % 5 == 0) ? radius - 15 : radius - 5;
      canvas.drawLine(Offset(0, radius), Offset(0, newRadius), linePainter);
      canvas.rotate(2 * pi / maxLines);
    });

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

utils.dart

class Utils{

  List<Color> getColorsArray (){
    return [
      Color(0xff5733),
      Color(0xc70039),
      Color(0x900c3e),
      Color(0x571845),
      Color(0x251e3e),
      Color(0x051e3e),

    ];
  }
}

下面的代码应使用线条绘制圆形

LinesPainter(Utils().getColorsArray()[0])

预期结果:

enter image description here

当前结果:

enter image description here

flutter dart flutter-layout
1个回答
2
投票

正如评论中提到的@pskink,我已经阅读了文档,并且我想到了我缺少十六进制代码中的Alpha值。

如下更改utils.dart文件,对我来说很好。

class Utils{

  List<Color> getColorsArray (){
    return [
      Color(0xffff5733),
      Color(0xffc70039),
      Color(0xff900c3e),
      Color(0xff571845),
      Color(0xff251e3e),
      Color(0xff051e3e),

    ];
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.