前言
前端的 UI 系统都会提供一个自绘 UI 的接口，在这个接口中通常会提供一个画布 Canvas，这个 Canvas 内封装了一些基本的 API，开发者可以通过 Canvas 绘制各种自定义图形。在Flutter中，提供了一个 CustomPaint 组件，它可以结合画笔 CustomPainter 来实现自定义图形绘制.
自定义 UI 的效果
通过 Canvas ，我们可以绘制各种特殊的UI效果，
-
各种图表
利用 Canvas 提供的 API，可以绘制柱状图、曲线图等图表。这样可以比其他第三方插件能更完美的还原 UI 设计效果。
-
动画
利用 Canvas 和插值器可以实现各种动画效果
-
不规则 UI
UI 设计中经常会使用不规则的视觉效果来表达重点，虽然前端可以切图来实现效果，但图片有适配、体积大、不够灵活等缺点。通过 Canvas 的裁剪合成等功能，我们也能通过代码还原 UI 的设计稿。
-
功能类 UI
如时间轴这类的UI效果，也可以利用 Canvas 自定义绘制。
CustomPaint 的基本使用和效果
CustomPaint 是 FLutter 内置的组件，CustomPainter是个抽象接口，在子类化CustomPainter的时候必须要重写它的
paint跟shouldRepaint接口，可以根据自己的场景来选择性的重写hitTest跟shouldRebuildSemantics方法
- 继承 CustomPainter 并重写 paint 和 shouldRepaint 两个方法
class _MyCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height), Paint());
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return this != oldDelegate;
}
}
复制代码- 在组件中使用
Container(
child: CustomPaint(
painter: _MyCustomPainter(),
),
width: 100,
height: 100,
)
复制代码- 效果如下，一个最基本的自定义UI，绘制了一个黑色的矩形
CustomPaint 属性
CustomPaint({
Key? key,
this.painter,
this.foregroundPainter,
this.size = Size.zero,
this.isComplex = false,
this.willChange = false,
Widget? child,
}
复制代码painter: 背景画笔，会显示在子节点后面;foregroundPainter: 前景画笔，会显示在子节点前面size：当child为null时，代表默认绘制区域大小，如果有child则忽略此参数，画布尺寸则为child尺寸。如果有child但是想指定画布为特定大小，可以使用SizeBox包裹CustomPaint实现。isComplex：是否复杂的绘制，如果是，Flutter会应用一些缓存策略来减少重复渲染的开销。willChange：和isComplex配合使用，当启用缓存时，该属性代表在下一帧中绘制是否会改变。
以上是 Flutter 中通过 Canvas 自定义 UI 的基本步骤。通过 canvas 提供的 API 和 Paint 提供的各种效果，可以实现更复杂的图表、动画等特殊的 UI 效果。具体实现方式将在系列文章中逐步的展示。
