Flutter 布局 BoxDecoration 参考指南：图像、边框、形状、阴影、渐变、背景混合模式

BoxDecoration

装饰效果通常用在容器组件上，以改变组件的外观。

图像：装饰图像

使用图像作为背景：

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://www.codeqd.com/zb_users/upload/2023/09/catalog-widget-placeholder.png',
          ),
        ),
      ),
    ),
  ),
);
复制代码

边框：边框

指定容器的边框样式。

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

，边框可以是圆角的。

如果装饰的shape是BoxShape.circle那么borderRadius没有效果

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）：Box形状

形状box 可以是长方形、正方形、椭圆形或圆形。 ， 对于所有其他形状，需要使用 ShapeDecoraving 代替 BoxDecoraTion

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

可以为容器添加阴影。

该参数是一个列表，因此您可以定义多个不同的阴影，然后将它们组合起来。

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),
        ],
      ),
    ),
  ),
);
复制代码

渐变

渐变有 3 种类型：LinearGradient、RadialGradient 和 SweepGradient 。

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 位于哪个元素上。

通过 backgroundBlendMode，您可以在 BlendMode 枚举类型中使用一长串算法。

首先将BoxDecoration配置为foregroundDecoration，它出现在子元素Container上方（而

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://www.codeqd.com/zb_users/upload/2023/09/catalog-widget-placeholder.png',
      ),
    ),
  ),
);
复制代码

backgroundBlendMode 不仅仅影响它所在的​​ Container。

backgroundBlendMode可以更改部件树中从Container中每个部件的颜色。在下面的代码中，有一个 Container 作为父元素，它显示图像 image 和使用 backgroundBlendMode Container 的子元素 。您仍然获得与之前的代码相同的效果。

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

作者：雨琪
链接：https://juejin.im/post/5cfe0d136fb9a07efc497d7d
来源：掘金
版权归作者所有。商业转载请联系作者获得许可。非商业转载请注明出处。