阅读 117

Flutter 的自定义 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的时候必须要重写它的paintshouldRepaint接口,可以根据自己的场景来选择性的重写 hitTestshouldRebuildSemantics 方法

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

文章分类
前端
文章标签