绘画圣手也能做到，自绘控件在Flutter中的妙用

2024-01-25 00:06:19

在Flutter的世界里，绘制控件可以分为三类：组合控件、自绘控件和继承widget。组合控件通过组合其他widget成为一个新的widget。而自绘控件则通过使用canvas与paint来完全绘制。我们着重介绍自绘控件，因为所有的widget归根结底都是使用canvas和paint来绘制的。

自绘控件最吸引人的地方在于灵活性，因为您可以完全控制绘制过程，这使您可以创建出惊人的图形、动画和其他视觉效果。使用canvas和paint时，您可以指定颜色、大小、形状和位置，还可以指定如何将这些元素组合在一起。换句话说，您可以完全按照自己的意愿来创建内容。

说到自绘控件，就不得不提CustomPainter这个类。CustomPainter是一个抽象类，它定义了自定义绘制的接口。要创建自定义绘图，您需要创建一个继承自CustomPainter的类，并重写paint()方法。在paint()方法中，您可以使用canvas和paint来创建所需的图形、动画和其他视觉效果。

当然，使用自绘控件也有一些缺点。首先，它们比组合控件或继承widget更复杂。其次，它们需要更多的代码。但是，这些缺点都是可以克服的。只要您掌握了必要的技能，就可以使用自绘控件来创建出令人惊叹的效果。

现在，让我们来看一些自绘控件的例子。

创建简单的形状

以下代码演示了如何使用自绘控件来创建一个简单的矩形：

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Colors.blue;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), paint);
  }

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: MyPainter());
  }
}

创建动画

以下代码演示了如何使用自绘控件来创建一个简单的动画：

class MyPainter extends CustomPainter {
  double progress = 0;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Colors.blue;
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width * progress, size.height), paint);
  }

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

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => startAnimation());
  }

  void startAnimation() {
    setState(() {
      widget.progress += 0.1;
    });
    if (widget.progress < 1) {
      WidgetsBinding.instance.addPostFrameCallback((_) => startAnimation());
    }
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(painter: MyPainter());
  }
}

创建交互式图形

以下代码演示了如何使用自绘控件来创建一个简单的交互式图形：

class MyPainter extends CustomPainter {
  double x = 0;
  double y = 0;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = Colors.blue;
    canvas.drawCircle(Offset(x, y), 10, paint);
  }

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

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          x += details.delta.dx;
          y += details.delta.dy;
        });
      },
      child: CustomPaint(painter: MyPainter()),
    );
  }
}