Flutter 布局参考手册BoxDecoration：图片、边框、形状、阴影、渐变、背景混合模式

BoxDecoration

装饰效果通常用于容器组件，来改变组件的外观。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

图片（image）：DecorationImage

将图片作为背景：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('image: DecorationImage')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        image: DecorationImage(
          fit: BoxFit.fitWidth,
          image: NetworkImage(
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
    ),
  ),
);
复制代码

边框（border）：Border

指定容器的边框样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('border: Border')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black, width: 3),
      ),
    ),
  ),
);
复制代码

边框半径（borderRadius）：BorderRadius

让边框可以是圆角。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

如果装饰的 shape 是 BoxShape.circle，那么 borderRadius 将无效文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('borderRadius: BorderRadius')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.black, width: 3),
          borderRadius: BorderRadius.all(Radius.circular(18))),
    ),
  ),
);
复制代码

形状（shape）：BoxShape

盒子的形状可以是长方形、正方形、椭圆或者圆形。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

对于其他任意形状，你应该使用 ShapeDecoration 而不是 BoxDecoration文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('shape: BoxShape')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        shape: BoxShape.circle,
      ),
    ),
  ),
);
复制代码

阴影（boxShadow）：List<BoxShadow>

可以给容器添加阴影。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

这个参数是一个列表，这样你就可以定义多种不同的阴影，然后将它们组合在一起。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('boxShadow: List<BoxShadow>')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        color: Colors.yellow,
        boxShadow: const [
          BoxShadow(blurRadius: 10),
        ],
      ),
    ),
  ),
);
复制代码

渐变（gradient）

有三种类型的渐变：LinearGradient、RadialGradient 和 SweepGradient。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('gradient: LinearGradient')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: const [
            Colors.red,
            Colors.blue,
          ],
        ),
      ),
    ),
  ),
);
复制代码

Scaffold(
  appBar: AppBar(title: Text('gradient: RadialGradient')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: const [Colors.yellow, Colors.blue],
          stops: const [0.4, 1.0],
        ),
      ),
    ),
  ),
);
复制代码

Scaffold(
  appBar: AppBar(title: Text('gradient: SweepGradient')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        gradient: SweepGradient(
          colors: const [
            Colors.blue,
            Colors.green,
            Colors.yellow,
            Colors.red,
            Colors.blue,
          ],
          stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
        ),
      ),
    ),
  ),
);
复制代码

背景混合模式（backgroundBlendMode）

backgroundBlendMode 是 BoxDecoration 中最复杂的属性。 它可以混合 BoxDecoration 的颜色和渐变，并且无论 BoxDecoration 在何种元素之上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

有了 backgroundBlendMode，你可以使用 BlendMode 枚举类型中的一长串算法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

首先，配置 BoxDecoration 为 foregroundDecoration，它被渲染于 Container 子元素的上方（而 decoration 被渲染于子元素的后面）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('backgroundBlendMode')),
  body: Center(
    child: Container(
      height: 200,
      width: 200,
      foregroundDecoration: BoxDecoration(
        backgroundBlendMode: BlendMode.exclusion,
        gradient: LinearGradient(
          colors: const [
            Colors.red,
            Colors.blue,
          ],
        ),
      ),
      child: Image.network(
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
    ),
  ),
);
复制代码

backgroundBlendMode 不仅影响它所在的 Container。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

backgroundBlendMode 能改变从 Container 的部件树中任意部件的颜色。 下面这段代码中，有一个作为父级元素的 Container，它渲染了一张图片 image 和一个使用了 backgroundBlendMode 的子元素 Container。你仍旧会得到和前一段代码相同的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13676.html

Scaffold(
  appBar: AppBar(title: Text('backgroundBlendMode')),
  body: Center(
    child: Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
            'https://flutter.io/images/catalog-widget-placeholder.png',
          ),
        ),
      ),
      child: Container(
        height: 200,
        width: 200,
        foregroundDecoration: BoxDecoration(
          backgroundBlendMode: BlendMode.exclusion,
          gradient: LinearGradient(
            colors: const [
              Colors.red,
              Colors.blue,
            ],
          ),
        ),
      ),
    ),
  ),
);
复制代码