深入浅出 CustomPainter，解锁 Flutter 绘制新世界

Android

2024-02-17 14:51:30

引言

Flutter 是一项跨平台移动开发框架，以其优雅的 UI 和出色的性能而闻名。在这个由七篇博文组成的系列教程中，我们将探索 Flutter 绘制的奥秘，而今天，我们将深入研究 CustomPainter 类，这是自定义绘图体验的关键。

CustomPainter：通往自定义绘图之路

在 Flutter 中，一切可见元素都通过绘制来呈现。CustomPainter 类为我们提供了一个画布，让我们可以使用丰富的 API 来控制绘图过程。

为了使用 CustomPainter，我们需要：

定义一个继承自 CustomPainter 的类，它包含了绘制逻辑。
创建 CustomPaint 组件，并将其与我们的 CustomPainter 相关联。

潜入 CustomPainter 的内部

CustomPainter 类提供了一系列方法，让我们可以自定义绘图过程：

@override void paint(Canvas canvas, Size size) ：在这个方法中，我们绘制所有内容。canvas 对象提供了绘图的画布，而 size 参数包含了 CustomPaint 的大小。
@override bool shouldRepaint(CustomPainter oldDelegate) ：这个方法决定了当 CustomPaint 的依赖关系发生变化时，是否需要重新绘制。

实践出真知：绘制一个圆形

让我们通过一个示例来了解 CustomPainter 的用法。我们将绘制一个带有文本的彩色圆形：

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5.0;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);

    final textPainter = TextPainter(
      text: TextSpan(
        text: 'Flutter 绘制',
        style: TextStyle(fontSize: 30, color: Colors.white),
      ),
      textAlign: TextAlign.center,
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(maxWidth: size.width);
    textPainter.paint(canvas, Offset(size.width / 2 - textPainter.width / 2, size.height / 2 - textPainter.height / 2));
  }

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