flutter - 如何在 Flutter 的 dart 中绘制具有坐标系(例如 Sin(x))的 2d 函数？

Question

如何在 Flutter 中绘制这样的东西并为其设置动画？

Answer 1

你需要的似乎只是一 block Canvas 。使用 Canvas ，您可以绘制任何您想要的内容，并通过按时重画来为其添加动画效果。

Flutter 中通过扩展 CustomPaint 来支持 Canvas，像这样:

class SinCanvas extends StatelessWidget {
  const SinCanvas({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomPaint(
        size:Size(600,400),
        painter: SinPainter()
      ),
    );
  }
}

class SinPainter extends CustomPainter{
  @override void paint(Canvas canvas, Size size){
    final midY = size.height/2;
    final paint = Paint()..style = PaintingStyle.fill
    ..color = Colors.black;
    canvas.drawLine(Offset(0,midY), Offset(size.width,midY), paint);
    var pt = Offset(0,midY);
    for(double i=0;i<600;i+=0.1){
      final npt = Offset(i,midY-sin(i/50)*100);
      canvas.drawLine(pt, npt, paint);
      pt = npt;
    }
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

要制作动画，您可以将 StatelessWidget 更改为 StatefulWidget，并使用 State 更新图形。

希望这能解决您的问题。