[Flutter] BoxShadow阴影详解（blurRadius与spreadRadius的区别）

Flutter开发中，我们常常需要给物体一个阴影，以增加立体感。如：

Container(
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),		// 阴影的颜色
        offset: Offset(10, 20),						// 阴影与容器的距离
        blurRadius: 45.0,							// 高斯的标准偏差与盒子的形状卷积。
        spreadRadius: 0.0,							// 在应用模糊之前，框应该膨胀的量。
      ),
    ],
  ),
)

上面代码效果是这样的

BoxShadow的属性

BoxShadow一共有四个属性：

1. color：阴影的颜色
2. offset：阴影与容器的距离
3. blurRadius：高斯的标准偏差与盒子的形状卷积。
4. spreadRadius：在应用模糊之前，框应该膨胀的量。

color和offset还比较容易理解，但是blurRadius和spreadRadius都是radius，有什么区别？我研究了一下，下面来讲一下。

color属性

color就是需要加的阴影的颜色，默认值是黑色：color: Colors.black，可以给他加一点透明度，如color: Colors.black.withOpacity(0.5)。

color: Colors.black	color: Colors.black.withOpacity(0.5)

offset属性

offset属性是阴影与容器的距离，是一个Offset类的对象，构造方法是Offset(double dx, double dy)。其中dx属性代表阴影往右偏移多少像素，负数则是往左偏移；dy属性代表阴影往下偏移多少像素，负数则是往上偏移。

offset: Offset(20, 20)	offset: Offset(-20, -20),

blurRadius属性

blurRadius属性是高斯的标准偏差与盒子的形状卷积，这样讲可能没有人听得懂，我的理解是用了高斯模糊，数字越大越模糊。默认值是0，表示一点也不进行模糊。为了看得更加清晰，我们去掉容器本身的颜色，再加个边框。

Container(
   height: 100,
   width: 100,
   decoration: BoxDecoration(
     // color: Colors.white, // 去掉容器本身的颜色
     border: Border.all(color: Colors.green), // 加个边框
     boxShadow: [
       BoxShadow(
         color: Colors.black,
         blurRadius: 0.0/*边缘完全不模糊*/,
         // blurRadius: 45/*边缘模糊*/,
       ),
     ],
   ),
 )

效果如下：

blurRadius: 0.0	blurRadius: 45
与容器同样大小，边缘没有经过模糊的黑色色块	经过模糊，边缘扩散

经过试验，我发现利用blurRadius，阴影扩散的大小范围是有上限的。也就是说，数字大到一定程度，阴影大小就不变了。

blurRadius: 100.0	blurRadius: 200

这时候还想把阴影放大怎么办呢？就要用spreadRadius了。效果如下：

blurRadius: 200.0, spreadRadius: 0.0	blurRadius: 200, spreadRadius: 50.0

spreadRadius属性

spreadRadius是在应用模糊之前，框应该膨胀的量。
也就是说，本来我的容器是100x100的，加上spreadRadius半径50, 我的阴影色块的初始大小就变成了(100 + 2 * 50) x (100 + 2 * 50) 了。然后再进行高斯模糊。

Container 大小：100x100 spreadRadius: 50	Container 大小：200x200 spreadRadius: 0

blurRadius和spreadRadius的区别

这里再总结一下blurRadius和spreadRadius的区别：

1. blurRadius是高斯模糊的程度，spreadRadius是阴影的大小。
2. 在一定范围内，增大blurRadius能使阴影扩散范围变大，但是过了阈值，继续增大blurRadius阴影大小不会变大。但spreadRadius能持续变大。