第一百八十三回 如何给图片添加阴影

1. 概念介绍

我们在前面章回中介绍了各种阴影，并且介绍了如何绘制阴影，不过还有一个比较特殊的组件没有阴影，该组件是图片，比如我们在绘制阴影时也无法给图片绘制阴影，我记得在Android原生开发时可以给图片绘制出阴影效果，但是在Flutter中无法给图片绘制出阴影。不过我们可以给图片添加阴影，本章回中将介绍具体的实现方法。

2. 思路与方法

2.1 实现思路

我们在前面的博客中介绍过一种给组件添加阴影的方法，给图片添加阴影可以借用此方法。总体的思路是在图片外层嵌套一个Container组件，然后通过Container组件来实现阴影效果，该阴影效果会出现在图片周围，相当于在图片上添加了阴影。

2.2 实现方法

有了实现的思路后，我们将介绍具体的实现方法，详细的步骤如下：

1. 创建Container组件对象，并且把Image组件赋值给它的child属性；
2. 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性；
3. 创建BoxShadow对象，并且把它赋值给BoxDecoration组件的boxShadow属性；
4. 调整BoxShadow组件的相关属性，控制阴影的大小，位置和颜色；

3. 代码与效果

3.1 示例代码

我们按照刚才介绍的实现方法来给图片添加阴影，下面是详细的代码。

///给图片添加阴影 
Widget buildImageShadow() {
  return Container(
    decoration: const BoxDecoration(
      boxShadow: [BoxShadow(color: Colors.redAccent,
        blurRadius: 16,
        blurStyle: BlurStyle.solid,
      ),]

    ),
    child: const Image(
      width: 160,
      height: 100,
      image: AssetImage("images/panda.jpeg"),
      fit: BoxFit.fill,
      filterQuality:FilterQuality.high ,
    ),
  );
}

3.2 运行效果

编译并且运行上面的代码可以得到以下效果图.

从图中可以看到图片的周围有一个红色的阴影。这个阴影就是我们通过代码添加的阴影。大家可以自己动手修改BoxShadow组件的属性，进而调试出不同颜色，不同位置的阴影效果。强烈建议大家自己去实践。

此外，这种添加方法还有一个缺点：对于纯色的图片添加阴影效果比较好，对于包含不同颜色的图片添加阴影效果不太好，主要原因是：图片中包含多种颜色，而阴影的颜色无法和图片中的多种颜色保持一致。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 在绘制图片时无法绘制阴影，不过可以给图片添加阴影；
• 给图片添加阴影通过Container组件和BoxShadow组件来实现；
• BoxShadow组件可以控制阴影的颜色，范围大小，出现位置等属性；
• 给纯色图片添加阴影的效果比较好，给包含不同颜色的图片添加的阴影效果不太好；

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