第五十四回：BoxDecoration Widget

我们在上一章回中介绍了DrawerHeader Widget相关的内容,本章回中将介绍 BoxDecoration Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的BoxDecoration Widget是一种修饰类组件，它不能单独使用，需要赋值给其它组件的decoration属性才有效果，赋值后会在其它组件外层嵌套一个边框，名字中Box来源于此。我们可以修改边框的颜色，形状，线条进而达到装饰的效果。其实，我们在上一章回中创建用户头像时使用过它，只是没有详细介绍而已，本章回中将详细介绍它的使用方法。

使用方法

和其它的Widget一样，BoxDecoration Widget提供了相关的属性来控制自己，下面是常用的属性：

• color属性：用来控制边框中间的填充颜色；
• border属性：用来添加边框,可以只添加部分，或者添加全部，可以修改边框的粗细，颜色;
• borderRadius属性：用来给边框添加圆角；
• shape属性：用来控制边框的形状，比如圆形或者矩形；
• boxShadow属性：用来给装饰框添加阴影效果,可以添加多个阴影;

这些属性都是可选属性，我们可以依据项目需求来使用相关的属性，最常用的是修改圆角，比如把该属性用来修饰Button组件，就可以实现圆角按钮。

示例代码

BoxDecoration(
  color: Colors.greenAccent,
  //添加边框,可以只添加部分，或者全添加
  border: Border(
    top: BorderSide(
        color: Colors.red, width: 5, style: BorderStyle.solid),
    bottom: BorderSide(color: Colors.yellow, width: 5),
  ),
  // border: Border.all(
  //   color: Colors.yellow,
  //   width: 3,
  // ),

  //设置圆角边框,角度超过35就变成了圆形
  // borderRadius: BorderRadius.circular(20),
  //上面是所有边框都设置圆角，也可能在某一侧设置圆角边框
  // borderRadius: BorderRadius.only(topRight: Radius.circular(30)),

  //调整box的形状，形状是圆形时不能使用圆角属性，否则报错
  shape: BoxShape.rectangle,
  // shape: BoxShape.circle,

  //给Box添加阴影,可以添加多个阴影
  boxShadow: [
    BoxShadow(
      //阴影偏移距离，第一个是x，第二个是y
      offset: Offset(30, 20),
      color: Colors.purpleAccent,
      //值越小越模糊
      blurRadius: 10,
      //模糊范围
      spreadRadius: 2,
    )
  ],
),

我们在上面的代码中添加了详细的注释，这些注释可以很好地解释一些小的细节。此外，还有一些注意事项需要说明：

• 给修饰框添加边框时，除非有特殊的需求，否则建议在四个方向上都添加边框；
• 如果把修饰框设置为圆形，那么不能再给它设置圆角，否则会报错；

把上面的代码赋值给容器类组件(比如Container)的decoration属性就可以看到漂亮的装饰效果。我在这里就不演示程序的运行效果了，建议大家自己动手去实践。

看官们，关于BoxDecoration Widget的内容就介绍到这里，欢迎大家在评论区交流与讨论!