Flutter 自定义绘制 CustomPaint CustomPainter 的使用

在 Flutter 中自定义 View 有两种方式:

1. 组合已有控件
2. 自定义绘制

如何自定义绘制

有两个类做这件事情:

• CustomPaint :会在绘制阶段提供一个 Canvas 画布
• CustomPainter : 具体的画笔, 可配置画笔的颜色,路径等

CustomPaint(
  painter: Sky(),
  child: Center(
    child: Text(
      'Once upon a time...',
      style: const TextStyle(
        fontSize: 40.0,
        fontWeight: FontWeight.w900,
        color: Color(0xFFFFFFFF),
      ),
    ),
  ),
)

当在绘制阶段时, CustomPaint 首先会调用 painter 在画布上进行绘制, 然后再绘制它的 child 控件, child 绘制完成之后会调用 foregroundPainter 进行绘制. 画布的坐标系和 CustomPaint 的坐标系匹配. CustomPaint 有个 Size 属性标识将绘制多大的区域, 绘制时这个 Size 属性将会传递到 CustomPainter 的 paint 方法中, 具体的绘制就在paint 方法中进行, void paint(Canvas canvas, Size size);