Flutter 的自定义 UI 系列(一)--前言

自定义UI系列专栏

前言

前端的 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 效果。具体实现方式将在系列文章中逐步的展示。