Flutter 中的阴影效果：提升 UI 层次感

Flutter 中的阴影效果：提升 UI 层次感

5 回复

使用BoxShadow类实现，调整参数控制阴影大小和颜色。

更多关于Flutter 中的阴影效果：提升 UI 层次感的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，使用 BoxShadow 组件创建阴影效果，通过设置 color、offset、blurRadius 等参数增强 UI 层次感。

在 Flutter 中，可以通过 BoxShadow 实现阴影效果，提升 UI 的层次感。示例代码：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.3),
        blurRadius: 10,
        offset: Offset(0, 4),
      ),
    ],
  ),
)

BoxShadow 参数包括 color（阴影颜色）、blurRadius（模糊程度）、offset（阴影偏移）。调整这些参数可以灵活控制阴影效果，增强 UI 的立体感。

使用BoxShadow类实现，调整参数以适应设计需求。

在 Flutter 中，阴影效果是提升 UI 层次感和视觉深度的常用手段。通过使用 BoxShadow 和 Elevation，你可以轻松地为组件添加阴影效果。

1. 使用 BoxShadow 添加阴影

BoxShadow 是一个灵活的类，允许你为 Container、Card 等组件添加自定义阴影。你可以控制阴影的颜色、模糊度、偏移量等属性。

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 10,
        offset: Offset(0, 5), // 阴影偏移量
      ),
    ],
  ),
)

2. 使用 Elevation 添加阴影

Elevation 是 Material Design 中的一个概念，用于表示组件的高度。通过设置 Elevation，Flutter 会自动为组件添加适当的阴影效果。Card、AppBar 等组件都支持 Elevation。

Card(
  elevation: 5, // 控制阴影的强度
  child: Container(
    width: 200,
    height: 200,
    color: Colors.white,
  ),
)

3. 自定义阴影效果

如果你需要更复杂的阴影效果，可以通过组合多个 BoxShadow 来实现。例如，添加多个不同颜色和偏移量的阴影：

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.blue.withOpacity(0.3),
        blurRadius: 10,
        offset: Offset(-5, -5),
      ),
      BoxShadow(
        color: Colors.red.withOpacity(0.3),
        blurRadius: 10,
        offset: Offset(5, 5),
      ),
    ],
  ),
)

4. 注意事项

  • 性能：过多的阴影效果可能会影响性能，尤其是在复杂布局中。尽量保持阴影的简洁性。
  • 视觉平衡：阴影的强度、颜色和偏移量应与整体设计风格保持一致，避免过度使用导致视觉混乱。

通过合理使用阴影效果，你可以显著提升 Flutter 应用的 UI 层次感和用户体验。

回到顶部