Flutter 颤振中的循环有多费力？

我正在学习《颤振》中的自定义画师，并一直致力于创建一个可以设置动画的指南针。我的方法是使用一个循环来吐出x，y偏移坐标，正如你在下面的代码中看到的。我运行代码块3次，一次360个循环（1度），一次16个循环（22.5度），一次4个循环（90度）。当我在调试模式下渲染自定义画师时，我对性能没有任何问题，但我想知道其他人的意见是什么。创建这样的图像，然后设置动画，会不会对计算机太费力

class Compass extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paintStrokeThin = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..color = Colors.black;
    final paintStrokeNormal = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2.5
      ..color = Colors.black;
    final paintStrokeThick = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0
      ..color = Colors.black;
    createCompass(
      outerDistanceFromEdge: 10.0,
      innerDistanceFromEdge: 15.0,
      noOfPoints: 360,
      paint: paintStrokeThin,
      size: size,
      canvas: canvas,
    );
    createCompass(
      outerDistanceFromEdge: 5.0,
      innerDistanceFromEdge: 15.0,
      noOfPoints: 16,
      paint: paintStrokeNormal,
      size: size,
      canvas: canvas,
    );
    createCompass(
      outerDistanceFromEdge: 0.0,
      innerDistanceFromEdge: 15.0,
      noOfPoints: 4,
      paint: paintStrokeThick,
      size: size,
      canvas: canvas,
    );
  }

  void createCompass(
      {double outerDistanceFromEdge,
      double innerDistanceFromEdge,
      int noOfPoints,
      Paint paint,
      Canvas canvas,
      Size size}) {
    final _width = size.width;
    final _height = size.height;
    final _interval = (360 / noOfPoints) * (pi / 180);

    for (var i = 1; i <= noOfPoints; i++) {
      var rad = i * _interval;
      var x1 = (0.5 * _width - outerDistanceFromEdge) * sin(rad) + 0.5 * _width;
      var x2 =
          (0.5 * _width - innerDistanceFromEdge) * sin(rad) + 0.5 * _height;
      var y1 =
          (0.5 * _height - outerDistanceFromEdge) * cos(rad) + 0.5 * _width;
      var y2 =
          (0.5 * _height - innerDistanceFromEdge) * cos(rad) + 0.5 * _height;
      canvas.drawLine(Offset(x1, y1), Offset(x2, y2), paint);
    }
  }

  @override
  bool shouldRepaint(Compass oldDelegate) => false;
} 

类指南针扩展自定义画师{
@凌驾
空心油漆（帆布，尺寸）{
最终油漆strokethin=油漆（）
…风格=绘画风格笔划
..冲程宽度=1.0
…颜色=颜色。黑色；
最终油漆strokenormal=油漆（）
…风格=绘画风格笔划
..冲程宽度=2.5
…颜色=颜色。黑色；
最终油漆strokethick=油漆（）
…风格=绘画风格笔划
..冲程宽度=3.0
…颜色=颜色。黑色；
创建指南针(
outerDistanceFromEdge:10.0，
内距边缘：15.0，
无点数：360，
油漆：油漆，
尺寸：尺寸，
画布：画布，
);
创建指南针(
outerDistanceFromEdge:5.0，
内距边缘：15.0，
无点数：16，
油漆：油漆正常，
尺寸：尺寸，
画布：画布，
);
创建指南针(
outerDistanceFromEdge:0.0，
内距边缘：15.0，
无点数：4，
油漆：油漆工，
尺寸：尺寸，
画布：画布，
);
}
虚空指南针(
{双外圆边缘，
与边缘的双内距离，
int noOfPoints，
油漆，
帆布，
大小}）{
最终宽度=尺寸。宽度；
最终高度=尺寸高度；
最终_间隔=（360/noOfPoints）*（pi/180）；
对于（var i=1；i false；
} 

与任何编程语言一样，循环是昂贵的函数，尤其是在UI（动画、小部件等）上渲染时。我建议您打开性能覆盖，检查渲染小部件的成本有多高

一个简单但强>键规则是<强>最小化使用昂贵的小部件>，因此考虑是否真的需要运行代码块3次或动画化。 看看长笛队的这篇长而重要的文章

---

最后，当你征求意见时，为生产应用程序制作复杂的动画不是一个好主意，尤其是当你独自工作时！

在计算机或移动设备上？我在桌面上运行这个，所以它也很灵敏。尝试过使用

画布#drawPicture

？不，我没有尝试过使用drawPicture，我会尝试一下现在开始。@Levy77它在您的桌面上可能响应良好，但在其他桌面上可能运行不太好，请检查下面的答案，我强烈建议您观看整个视频：）