首页 > 解决方案 > Flutter:如何在 CustomPainter 对象中设置动态颜色

问题描述

为 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;
}

实用工具.dart

class Utils{

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

    ];
  }
}

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

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

预期结果:

在此处输入图像描述

当前结果:

在此处输入图像描述

标签: flutterdartflutter-layout

解决方案


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

像下面这样在 utils.dart 文件中进行更改,它对我来说很好用。

class Utils{

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

    ];
  }
}

推荐阅读