flutter如何实现阴影效果

在Flutter中如何给Widget添加阴影效果？我看到有些App的按钮和卡片有很漂亮的阴影，但不知道具体怎么实现。是用BoxShadow还是Elevation？能否提供一个简单的代码示例说明这两种方式的区别和适用场景？最好能解释下阴影颜色、偏移量和模糊度这些参数的调整方法。

2 回复

在Flutter中，使用BoxDecoration的boxShadow属性实现阴影效果。例如：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey,
        blurRadius: 5.0,
        offset: Offset(2, 2),
      ),
    ],
  ),
)

可调整颜色、模糊半径和偏移量。

更多关于flutter如何实现阴影效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下几种方式实现阴影效果：

1. Container的BoxShadow

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 7,
        offset: Offset(0, 3), // 阴影位置
      ),
    ],
  ),
)

2. Card组件（自带阴影）

Card(
  elevation: 8, // 阴影强度
  child: Container(
    width: 200,
    height: 200,
    child: Text('带阴影的卡片'),
  ),
)

3. Material组件

Material(
  elevation: 10,
  borderRadius: BorderRadius.circular(12),
  child: Container(
    width: 200,
    height: 200,
    padding: EdgeInsets.all(16),
    child: Text('Material阴影'),
  ),
)

4. 物理效果阴影（Cupertino风格）

PhysicalModel(
  color: Colors.white,
  elevation: 6,
  borderRadius: BorderRadius.circular(8),
  child: Container(
    width: 200,
    height: 200,
    child: Text('物理阴影效果'),
  ),
)

主要参数说明：

  • color: 阴影颜色
  • blurRadius: 模糊半径（值越大越模糊）
  • spreadRadius: 扩散半径（值越大阴影范围越大）
  • offset: 阴影偏移量（x,y方向）
  • elevation: 阴影高度（仅Material和Card）

选择哪种方式取决于具体需求：BoxShadow最灵活，Card适合卡片式布局，Material适合Material Design风格，PhysicalModel提供更真实的物理效果。

回到顶部