颤振中的循环有多费力？答案

【问题标题】：How taxing are loops in flutter?颤振中的循环有多费力？
【发布时间】：2021-02-25 06:10:44
【问题描述】：

我正在学习 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;
}

【问题讨论】：

在电脑上还是在移动设备上？
我在桌面上运行它，所以它也是响应式的。
尝试使用Canvas#drawPicture？
不，我没有尝试过使用 drawPicture，我现在就试一试。
@Levy77 它可能在您的桌面上响应，但在其他桌面上可能无法正常运行，请查看下面的答案，我强烈建议您观看整个视频 :)

标签： flutter flutter-animation

【解决方案1】：

与任何编程语言一样，循环对于call 来说是昂贵的函数，尤其是在 UI 上呈现时（动画、小部件等）。我建议您打开性能叠加层并检查该小部件的渲染成本。

一个简单但关键的规则是尽量减少昂贵小部件的使用，因此请考虑是否真的需要运行代码块 3 次或制作动画。查看来自 Fluter 团队的这个冗长但重要的 video。

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

【讨论】：