第二百五十五回
文章目录
- 1. 概念介绍
- 2. 思路与方法
- 2.1 实现思路
- 2.2 实现方法
- 3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
- 4. 内容总结
我们在上一章回中介绍了"自定义可以滑动的刻度尺"样相关的内容，本章回中将介绍"如何给图片添加阴影".闲话休提，让我们一起Talk Flutter吧。
1. 概念介绍
我们在前面章回中介绍了各种阴影，并且介绍了如何绘制阴影，不过还有一个比较特殊的组件没有阴影，该组件是图片，比如我们在绘制阴影时也无法给图片绘制阴影，
我记得在Android原生开发时可以给图片绘制出阴影效果，但是在Flutter中无法给图片绘制出阴影。不过我们可以给图片添加阴影，本章回中将介绍具体的实现方法。
2. 思路与方法
2.1 实现思路
我们在前面的博客中介绍过一种给组件添加阴影的方法，给图片添加阴影可以借用此方法。总体的思路是在图片外层嵌套一个Container组件，然后通过Container组件
来实现阴影效果，该阴影效果会出现在图片周围，相当于在图片上添加了阴影。
2.2 实现方法
有了实现的思路后，我们将介绍具体的实现方法，详细的步骤如下：
- 创建Container组件对象，并且把Image组件赋值给它的child属性；
- 创建BoxDecoration对象并且把它赋值给Container组件的decoration属性；
- 创建BoxShadow对象，并且把它赋值给BoxDecoration组件的boxShadow属性；
- 调整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
组件的属性，进而调试出不同颜色，不同位置的阴影效果。强烈建议大家自己去实践。030
此外，这种添加方法还有一个缺点：对于纯色的图片添加阴影效果比较好，对于包含不同颜色的图片添加阴影效果不太好，主要原因是：图片中包含多种颜色，而阴影的颜
色无法和图片中的多种颜色保持一致。
4. 内容总结
最后，我们对本章回的内容做一个全面的总结：
- 在绘制图片时无法绘制阴影，不过可以给图片添加阴影；
- 给图片添加阴影通过Container组件和BoxShadow组件来实现；
- BoxShadow组件可以控制阴影的颜色，范围大小，出现位置等属性；
- 给纯色图片添加阴影的效果比较好，给包含不同颜色的图片添加的阴影效果不太好；
看官们，与"如何给图片添加阴影"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!