第二百二十二回

我们在上一章回中介绍了"自定义可以滑动的刻度尺"样相关的内容,本章回中将介绍"如何给图片添加阴影".闲话休提,让我们一起Talk Flutter吧。

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
组件的属性,进而调试出不同颜色,不同位置的阴影效果。强烈建议大家自己去实践。030
此外,这种添加方法还有一个缺点:对于纯色的图片添加阴影效果比较好,对于包含不同颜色的图片添加阴影效果不太好,主要原因是:图片中包含多种颜色,而阴影的颜
色无法和图片中的多种颜色保持一致。

4. 内容总结

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

  • 在绘制图片时无法绘制阴影,不过可以给图片添加阴影;
  • 给图片添加阴影通过Container组件和BoxShadow组件来实现;
  • BoxShadow组件可以控制阴影的颜色,范围大小,出现位置等属性;
  • 给纯色图片添加阴影的效果比较好,给包含不同颜色的图片添加的阴影效果不太好;
    看官们,与"如何给图片添加阴影"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,前端,android,移动开发Flutter)