文章目录
- 概念介绍
- 实现方法
- 示例代码
我们在上一章回中介绍了如何在页面中添加图片相关的内容，本章回中将介绍如何给组件添加阴影.闲话休提，让我们一起Talk Flutter吧。
概念介绍
我们在本章回中介绍的阴影类似影子，只是它不像影子那么明显，通常是在组件右下角显示一小部分，用来突出立体效果。在Flutter中我们可以使用BoxShadow组件来
实现阴影效果，不过我们通常会不单独使用使用它，而是和BoxDecoration组件一起配合使用，本章回中将介绍如何使用BoxShadow组件给其它组件添加阴影。
实现方法
在介绍添加阴影的方法前，我们先介绍一下BoxShadow组件的属性，通过这些属性可以控制阴影效果。
- offset属性：主要用来控制阴影的偏移值,正值表示向下和向右偏移，负值向上和左偏移
- color属性：主要用来控制阴影的颜色；
- spreadRadius属性：主要用来控制阴影展开的大小,值越大阴影越大；
- blurRadius属性：主要用来控制阴影模糊效果的大小，值越大越明显;
上面是BoxShadow组件的常用属性，不过只掌握这些还不行，我们还需要把它绑定到个某个组件上，绑定方法如下：
- 创建Container组件对象;
- 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性；
- 创建BoxShadow对象，并且把它赋值给BoxDecoration组件的boxShadow属性；
- 创建任意一个组件对象，并且把它赋值给Container组件的child属性；
从上面的步骤中可以看到，我们通过Container组件的child和boxShadow属性把任意的组件和阴影组件(BoxShadow)绑定到了一起，这就相当于给组件添加了阴影。
此外，oxShadow属性是List类型，可以存放多个对象，也就是说可以把多个阴影对象赋值给该属性，这样就可以实现是混合阴影的效果。
示例代码
介绍完给组件添加阴影的方法后，我们通过具体的代码来演示：
Container(width: 60,height: 60,child:Text("hello"),decoration: const BoxDecoration(shape: BoxShape.circle,color: Colors.green,///可以组合多个BoxShadow,实现混合颜色的效果boxShadow: [BoxShadow(///控制阴影的偏移值,正值向下和向右偏移，负值向上和左偏移offset: Offset(6, 6),///控制出阴影颜色color: Colors.red,///控制阴影展开的大小,值越大阴影越大spreadRadius: 1.0,///控制模糊的大小blurRadius: 8.0,),BoxShadow(offset: Offset(6, 6),color: Colors.black38,spreadRadius: 1.0,blurRadius: 8.0,)]),
);
在上面的代码中，我们给Text组件添加了阴影效果，因为使用了两个阴影对象，所以会产生混合阴影效果。我在这里就不演示程序的运行结果了，建议大家自己动手去实
践，修改一下颜色，也可以修改阴影的大小，真正体验一下阴影效果。
看官们，与"如何给组件添加阴影"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
