CustomPainter —— Flutter 绘制探索之旅（二）

2023-09-15 05:33:54

导言

在 Flutter 绘制探索之旅的第一篇章中，我们领略了 Flutter 绘制的强大魅力，领略了 CustomPaint 组件的灵活与便捷。在这一篇章中，我们将更深入地探索 CustomPainter 类，全面分析其相关类，揭秘 Flutter 绘制引擎的奥秘，助力你打造定制化组件，掌握 Flutter 绘制的精髓。

CustomPainter 揭秘

CustomPainter 是 Flutter 中一个至关重要的类，它承载着自定义绘制的重任。CustomPainter 对象负责如何将内容绘制到 Canvas 上。它通过两个关键方法来实现这一功能：

paint(Canvas canvas, Size size)：此方法负责绘制内容。你可以在此方法中使用 Canvas 对象绘制任意形状、文本或图像。
shouldRepaint(CustomPainter oldDelegate)：此方法用于确定当 CustomPaint 组件的状态发生变化时是否需要重新绘制。

相关类详解

除了 CustomPainter 类，还有几个相关的类在绘制过程中发挥着重要作用：

Canvas ：Canvas 类代表一个二维绘图表面，它提供了多种方法来绘制形状、文本和图像。
Paint ：Paint 类用于指定绘制的样式和属性，例如颜色、线宽、填充类型等。
Rect ：Rect 类表示一个矩形区域，它用于定义绘制区域或裁剪区域。
Path ：Path 类了一条或多条连接的线段，它用于绘制复杂的形状。

绘制引擎揭秘

Flutter 的绘制引擎是一个强大而高效的系统，它负责将你的绘制指令转换为像素。绘制引擎使用一种称为 Skia 的图形库，它提供了丰富的绘图 API。Skia 以其高性能、低延迟和跨平台兼容性而闻名。

定制化组件实践

掌握了 CustomPainter 和相关类，我们就可以着手打造定制化组件。这里是一个绘制圆形进度条的示例：

import 'package:flutter/material.dart';

class CircleProgressBar extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 10
      ..style = PaintingStyle.stroke;

    final center = Offset(size.width / 2, size.height / 2);
    final radius = size.width / 2 - 5;

    canvas.drawCircle(center, radius, paint);
  }

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