网站设计教程网站外流网站建设

我们在上一章回中介绍了如何在页面中添加图片相关的内容，本章回中将介绍如何给组件添加阴影.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中介绍的阴影类似影子，只是它不像影子那么明显，通常是在组件右下角显示一小部分，用来突出立体效果。在Flutter中我们可以使用BoxShadow组件来
实现阴影效果，不过我们通常会不单独使用使用它，而是和BoxDecoration组件一起配合使用，本章回中将介绍如何使用BoxShadow组件给其它组件添加阴影。

实现方法

在介绍添加阴影的方法前，我们先介绍一下BoxShadow组件的属性，通过这些属性可以控制阴影效果。

• offset属性：主要用来控制阴影的偏移值,正值表示向下和向右偏移，负值向上和左偏移
• color属性：主要用来控制阴影的颜色；
• spreadRadius属性：主要用来控制阴影展开的大小,值越大阴影越大；
• blurRadius属性：主要用来控制阴影模糊效果的大小，值越大越明显;
  上面是BoxShadow组件的常用属性，不过只掌握这些还不行，我们还需要把它绑定到个某个组件上，绑定方法如下：

1. 创建Container组件对象;
2. 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性；
3. 创建BoxShadow对象，并且把它赋值给BoxDecoration组件的boxShadow属性；
4. 创建任意一个组件对象，并且把它赋值给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组件添加了阴影效果，因为使用了两个阴影对象，所以会产生混合阴影效果。我在这里就不演示程序的运行结果了，建议大家自己动手去实
践，修改一下颜色，也可以修改阴影的大小，真正体验一下阴影效果。
看官们，与"如何给组件添加阴影"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!