文章目录
我们在上一章回中介绍了DrawerHeader Widget相关的内容,本章回中将介绍BoxDecoration Widget.闲话休提，让我们一起Talk Flutter吧。
1. 概念介绍
我们在这里介绍的BoxDecoration Widget是一种修饰类组件，它不能单独使用，需要赋值给其它组件的decoration属性才有效果，赋值后会在其它组件外层嵌套一
个边框，名字中Box来源于此。我们可以修改边框的颜色，形状，线条进而达到装饰的效果。其实，我们在上一章回中创建用户头像时使用过它，只是没有详细介绍而已，
本章回中将详细介绍它的使用方法。
2. 使用方法
和其它的Widget一样，BoxDecoration Widget提供了相关的属性来控制自己，下面是常用的属性：
- color属性：用来控制边框中间的填充颜色；
- border属性：用来添加边框,可以只添加部分，或者添加全部，可以修改边框的粗细，颜色;
- borderRadius属性：用来给边框添加圆角；
- shape属性：用来控制边框的形状，比如圆形或者矩形；
- boxShadow属性：用来给装饰框添加阴影效果,可以添加多个阴影;
这些属性都是可选属性，我们可以依据项目需求来使用相关的属性，最常用的是修改圆角，比如把该属性用来修饰Button组件，就可以实现圆角按钮。
3. 示例代码
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的内容就介绍到这里，欢迎大家在评论区交流与讨论!
标签：外观,Widget,color,圆角,边框,修改,添加,属性 From： https://blog.csdn.net/talk_8/article/details/142301443