第一百四十五回 如何给组件添加阴影

我们在上一章回中介绍了如何在页面中添加图片相关的内容，本章回中将介绍 如何给组件添加阴影.闲话休提，让我们一起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,
      )
    ]
  ),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在上面的代码中，我们给Text组件添加了阴影效果，因为使用了两个阴影对象，所以会产生混合阴影效果。我在这里就不演示程序的运行结果了，建议大家自己动手去实践，修改一下颜色，也可以修改阴影的大小，真正体验一下阴影效果。

看官们，与"如何给组件添加阴影"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!