Flutter 自定义Decoration

Flutter 中 可以给Container设置decoration来设置背景，边框等等效果，非常方便。

      Container(
        decoration: TestDecoration(),
      );

但是Flutter自带的decoration比较少，只能支持常规样式，当我们需要设置特殊背景时，就满足不了我们的需要了。

这时候，就有必要自定义一个我们定制化的decoration。

搜了一下flutter sdk代码，发现flutter里有一个定制化的FlutterLogoDecoration类，用这个FlutterLogoDecoration可以生成一个flutter logo样式的decoration。
我们可以参考它的代码来写一个我们自定义的decoration。

经过我的分析，自定义decoration的步骤还是很简单的。
一个简单的代码框架是这样的。

class MyDecoration extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return _MyBoxPainter(this);
  }
}

class _MyBoxPainter extends BoxPainter {
  final TestDecoration myDecoration;
  final Paint painter;

  _MyBoxPainter(this.myDecoration)
      : painter = Paint()

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    //我们需要实现的代码
    //具体绘制decoration的内容
  }
}

这段代码中，我们主要需要实现的，就是_MyBoxPainter的paint方法。

上面的的代码，是先写了一个MyDecoration类继承Decoration，然后重写了其中的createBoxPainter方法，创建一个_MyBoxPainter类。
_MyBoxPainter类是继承BoxPainter的，里面的paint方法需要我们实现，在该方法中具体编写decoration实际绘制的内容。
绘制时，主要用到了canvas.draw...相关的api。

下面是一份带有红色边框，和内部有“测试”字样的decoration的demo代码。

class MyDecoration extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return _MyBoxPainter(this);
  }
}

class _MyBoxPainter extends BoxPainter {
  final MyDecoration testDecoration;
  final Paint painter;

  _MyBoxPainter(this.testDecoration)
      : painter = Paint()
          ..color = Colors.red
          ..strokeWidth = 2;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    var size = configuration.size;
    Offset leftTop = offset;
    Offset rightTop = leftTop.translate(size.width, 0);
    Offset leftBottom = leftTop.translate(0, size.height);
    Offset rightBottom = leftTop.translate(size.width, size.height);

    canvas.drawLine(leftTop, rightTop, painter);
    canvas.drawLine(leftTop, leftBottom, painter);
    canvas.drawLine(rightTop, rightBottom, painter);
    canvas.drawLine(leftBottom, rightBottom, painter);

    var textPainter = TextPainter(
      text: TextSpan(
        text: "测试",
        style: TextStyle(
          backgroundColor: Colors.green,
          color: Colors.red,
          fontSize: 12,
        ),
      ),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();
    textPainter.paint(canvas, (leftTop + rightBottom) / 2);
  }
}

这里设置了painter的颜色是红色，宽度是2，用来绘制边框。
paint方法的Offset offset参数表示控件左上角的位置。
configuration.size 可以得到控件的宽高。
所以，

    Offset leftTop = offset;
    Offset rightTop = leftTop.translate(size.width, 0);
    Offset leftBottom = leftTop.translate(0, size.height);
    Offset rightBottom = leftTop.translate(size.width, size.height);

通过上面这四行代码，就可以得到控件四个角的位置。

	canvas.drawLine(leftTop, rightTop, painter);
    canvas.drawLine(leftTop, leftBottom, painter);
    canvas.drawLine(rightTop, rightBottom, painter);
    canvas.drawLine(leftBottom, rightBottom, painter);

然后通过drawLine可以绘制四个边框。
这里是演示demo，实际要绘制边框可以使用canvas.drawRect(rect, paint)方法更为方便。

    var textPainter = TextPainter(
      text: TextSpan(
        text: "测试",
        style: TextStyle(
          backgroundColor: Colors.green,
          color: Colors.red,
          fontSize: 12,
        ),
      ),
      textDirection: TextDirection.ltr,
    );

这里定义了一个“测试”文字绘制的painter，文字颜色是红色，底色是绿色，字号是12，文字方向是从左到右。
需要注意的是，需要先调用textPainter.layout(); 才能真正绘制，否则会报错。
调用textPainter.paint(canvas, (leftTop + rightBottom) / 2); 即可完成绘制。(leftTop + rightBottom) / 2)表示绘制在中心位置。

---

总体来说代码很简单，只要按照这个框架实现对应的方法即可。
主要是用了canvas.draw...相关的api 和 TextPainter.paint方法。