Flutter – BoxShadow 小部件

在 Flutter 中，BoxShadow 小部件用于向组件添加阴影效果，BoxShadow 类中可定义阴影的偏移量、模糊程度、颜色和形状等属性，可以通过这些属性场景中创建不同的阴影效果。本文将介绍 BoxShadow 类的使用方法和相关属性。

BoxShadow 构造函数

BoxShadow 构造函数定义如下：

BoxShadow({
  Color color = const Color(0xFF000000),
  double blurRadius = 0.0,
  double spreadRadius = 0.0,
  Offset offset = Offset.zero
})

参数说明如下：

• color: 阴影的颜色，默认为黑色。
• blurRadius: 阴影的模糊程度，默认为 0，如果希望创建更柔和的阴影效果，可将其设置为一个正数。
• spreadRadius: 阴影扩散的范围，默认为 0，如果希望创建更大范围的阴影效果，可将其设置为一个正数。
• offset: 阴影的偏移量，默认为 Offset.zero。

使用示例

下面是一个简单的示例，为一个 Container 添加黑色阴影：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black,   
        blurRadius: 10.0,      
        spreadRadius: 2.0,     
        offset: Offset(0.0, 3.0),
      )
    ],
  ),
)

运行效果如下：

BoxShape 枚举类型

BoxShape 枚举类型用于定义阴影的形状，包含了四种常见的形状：

• BoxShape.rectangle: 矩形。
• BoxShape.circle: 圆形。
• BoxShape.circle: 圆角矩形。
• BoxShape.circle: 椭圆形。

使用方法如下：

BoxDecoration(
  boxShadow: [
    BoxShadow(
      color: Colors.black,
      blurRadius: 10.0,
      spreadRadius: 2.0,
      offset: Offset(0.0, 3.0),
    ),
  ],
  shape: BoxShape.circle, // 设置阴影形状为圆形
),

总结

BoxShadow 是一个十分实用的小部件，为组件添加阴影效果可以让界面更加立体、美观。阅读本文，你已经掌握了 BoxShadow 类的使用方法和相关属性，可以自己尝试创建不同类型的阴影效果。