BoxDecoration的boxShadow属性的阴影集合各配置项含义是什么？

单个阴影配置项的参数作用 #

boxShadow接收的是BoxShadow类型的数组，每个BoxShadow实例的参数作用如下：

• color：阴影的填充颜色，支持带透明度的色值，是决定阴影风格的核心参数，比如浅灰阴影做投影、半透明白色做内高光都靠这个参数实现。
• offset：阴影相对父组件的偏移量，格式为Offset(水平偏移, 垂直偏移)，水平值为正则向右偏、负则向左偏，垂直值为正则向下偏、负则向上偏，值为Offset.zero时阴影和组件完全重合。
• blurRadius：阴影的模糊程度，数值越大阴影越分散、边缘越柔和，数值为0时是完全没有模糊的硬边阴影。
• spreadRadius：阴影的缩放参数，数值为正时阴影会向四周均匀放大，数值为负时阴影会向内部均匀缩小，适合调整阴影的覆盖范围。
• blurStyle：可选参数，定义阴影的模糊计算规则，默认是BlurStyle.normal（常规外阴影），还支持BlurStyle.inner（内阴影）、BlurStyle.solid（硬边模糊）等特殊风格。

阴影项的数量上限 #

官方没有对boxShadow数组的长度做硬性的代码层面限制，理论上可以传入任意数量的阴影配置。但实际开发中不建议设置超过5个阴影：每多一层阴影都会增加渲染的计算开销，阴影过多会导致页面掉帧，尤其是在列表滚动、动画播放的场景下性能影响会更明显。 #

不同数量阴影的效果差异 #

• 1项阴影：最通用的场景，用来实现基础的投影效果，比如卡片的悬浮感、按钮的凸起效果，视觉风格简洁干净，不会有多余的视觉干扰。
  常见示例代码：

  boxShadow: [
    BoxShadow(color: Colors.black12, blurRadius: 4, offset: Offset(0, 2))
  ]
  

• 2项阴影：用来实现更有层次感的光影，最常见的搭配是「近处小范围的实阴影+远处大范围的虚阴影」，比单层阴影的真实感强很多，拟物化组件、轻质感设计里用的很多，也可以用一层亮色偏上的阴影做高光、一层暗色偏下的阴影做投影，实现凹刻/浮雕效果。
• 3项及以上阴影：用来实现复杂的特殊效果，比如玻璃态组件的多层光影、霓虹发光效果、高度拟物的纹理质感，分层越多光影的过渡越细腻，但如果参数搭配不合理很容易出现阴影发脏、视觉杂乱的问题，调试成本也会高很多。

内容的提问来源于stack exchange，提问作者BambinoUA