简介

在child绘制前或绘制后，添加额外的限制条件到child上的widget

根据边界的宽高，对其child进行插入绘制

基本用法

decoration → Decoration

常用于BoxDecoration
BoxDecoration提供多种方式来绘制以一个框
盒子形状可以是圆形也可以是矩形，用borderRadius属性来绘制角度

position → DecorationPosition

position: DecorationPosition.foreground,

实例演示

class DecoratedBoxCreate extends StatelessWidget {
  DecoratedBoxCreate({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.background,
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        //设置图片内容
        image:  DecorationImage(
            fit: BoxFit.cover,
            image: ExactAssetImage('assets/images/food01.jpeg')),
        //外宽边框，可以不设置
        border: Border.all(
          color: Colors.blue.shade50,
          width: 10.0,
        ),
      ),
    );
  }
}

class DecoratedBoxCreateTwo extends StatelessWidget {
  DecoratedBoxCreateTwo({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.background,
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        //设置图片内容
        image:  DecorationImage(
            fit: BoxFit.cover,
            image: ExactAssetImage('assets/images/food01.jpeg')),
        //根据传入的不同大小，呈现图片效弧度不同，
        borderRadius: BorderRadius.circular(90.0),
      ),
    );
  }
}

class DecoratedBoxCreateShape extends StatelessWidget {
  DecoratedBoxCreateShape({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      position: DecorationPosition.background,
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        image:  DecorationImage(
            fit: BoxFit.cover,
            image: ExactAssetImage('assets/images/food01.jpeg')),
        border: Border.all(
          color: Colors.blue.shade50,
          width: 5.0,
        ),
        shape: BoxShape.circle,
      ),
    );
  }
}