Flutter BoxDecoration boxShadow 完整用法

牛马1112026-04-14 10:54

boxShadow 是 BoxDecoration 的属性，用来加阴影，接收一个数组，可以同时加多层阴影。

1. 最常用写法（单阴影）

dart

复制代码

BoxDecoration(
  boxShadow: [
    BoxShadow(
      color: Colors.black12,    // 阴影颜色
      blurRadius: 10,          // 模糊程度
      spreadRadius: 2,         // 扩散范围
      offset: Offset(0, 4),    // 偏移 (x, y)
    ),
  ],
)

2. 每个参数说明

color ：阴影颜色，一般带透明度 Colors.black12 / 0x11000000
blurRadius：模糊半径，越大越模糊
spreadRadius：扩散大小，正数变大，负数变小
offset ：偏移
- Offset(0,0) 居中
- Offset(0,4) 向下阴影
- Offset(2,2) 右下阴影

3. 多层阴影（质感更强）

dart

复制代码

boxShadow: [
  BoxShadow(
    color: Color(0x08000000),
    blurRadius: 15,
    offset: Offset(0, 6),
  ),
  BoxShadow(
    color: Color(0x0A000000),
    blurRadius: 30,
    offset: Offset(0, 12),
  ),
]

4. 毛玻璃 + 圆角 + 阴影（你现在的组合）

dart

复制代码

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.15),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: Colors.white.withOpacity(0.2),
          width: 1,
        ),
        // 阴影
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 20,
            spreadRadius: 1,
            offset: Offset(0, 8),
          ),
        ],
      ),
    ),
  ),
)

5. 小坑

阴影要半透明颜色才自然
阴影太大、太多层会卡顿
加了阴影后，ClipRRect 可能会裁掉阴影，需要给父组件留空间