案例概述

elevation 参数用于控制组件的高度和阴影。Material Design 中的高度系统用于表示组件在 z 轴上的位置。本案例展示了如何使用 elevation 创建阴影效果。

核心概念

1. Elevation 基础

Elevation 是 Material Design 中的高度概念。

2. 阴影效果

高度越高，阴影越明显。

3. 视觉层次

通过 elevation 创建视觉层次。

代码详解

示例 1：基础阴影

class BasicShadowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.white,
      ),
    );
  }
}

代码解释： 这个示例展示了 Card 组件的基础阴影效果。elevation 参数值为 4 表示组件在 Material Design 的高度系统中处于第 4 层。elevation 越大，阴影越深、越明显，视觉上元素显得离屏幕表面越远。Card 是 Material Design 中常用的容器，自动应用阴影和圆角。elevation 为 0 时没有阴影，为 1–24 时阴影逐步加深。这种设计帮助用户理解 UI 的层次结构和可交互性。

示例 2：不同高度的阴影

class DifferentElevationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Card(
          elevation: 0,
          child: Container(
            width: 100,
            height: 50,
            color: Colors.blue,
          ),
        ),
        Card(
          elevation: 4,
          child: Container(
            width: 100,
            height: 50,
            color: Colors.green,
          ),
        ),
        Card(
          elevation: 8,
          child: Container(
            width: 100,
            height: 50,
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}

代码解释： 这个示例通过对比展示了 elevation 值对阴影的影响。三个 Card 分别设置 elevation 为 0、4、8，阴影逐步加深。elevation 为 0 时卡片与背景几乎无区别，elevation 为 4 时有轻微阴影，elevation 为 8 时阴影明显，视觉上卡片"浮起"更高。这种对比帮助用户理解 Material Design 的高度系统，也是设计信息层级的关键。在实际应用中，通常为可交互元素（如按钮、卡片）设置较高的 elevation，为静态背景设置较低的 elevation。

示例 3：按钮阴影

class ButtonShadowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        elevation: 8,
      ),
      onPressed: () {},
      child: const Text('按钮'),
    );
  }
}

代码解释： 这个示例展示了如何为 ElevatedButton 设置阴影。通过 ElevatedButton.styleFrom(elevation: 8) 为按钮添加高度和阴影效果。ElevatedButton 的名字本身就表示它是"凸起的"，elevation 参数控制这种凸起的程度。elevation 越高，按钮看起来越像从屏幕上"浮起"。这种视觉反馈帮助用户识别可点击的元素。在悬停或按下时，elevation 通常会动态变化，进一步增强交互反馈。

示例 4：AppBar 阴影

class AppBarShadowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
        elevation: 8,
      ),
      body: const Center(child: Text('内容')),
    );
  }
}

代码解释： 这个示例展示了如何为 AppBar 设置阴影。AppBar 是应用的顶部导航栏，elevation 参数为 8 表示它在高度系统中处于较高位置，会投射明显的阴影到下方内容。这种阴影帮助用户视觉上区分 AppBar 和主内容区域，强化信息层级。AppBar 的 elevation 默认通常为 4，设置为 8 会更加突出。在某些设计中，可能会将 AppBar 的 elevation 设置为 0 以实现"无边界"的现代设计风格。

示例 5：自定义阴影

class CustomShadowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            blurRadius: 12,
            offset: const Offset(4, 8),
          ),
        ],
      ),
    );
  }
}

代码解释： 这个示例展示了如何使用 BoxShadow 创建完全自定义的阴影效果，不依赖 Material Design 的 elevation 系统。BoxShadow 提供了更细粒度的控制：color 定义阴影颜色和透明度，blurRadius 控制阴影的模糊程度（值越大阴影越柔和），offset 定义阴影相对于元素的偏移量（这里向右下方偏移）。这种自定义方式适合需要特殊视觉效果的设计，如长阴影、彩色阴影、多层阴影等。BoxShadow 可以在 boxShadow 列表中添加多个，实现复杂的阴影组合。

高级话题

1. 动态/响应式设计

根据屏幕大小调整阴影。

2. 动画与过渡

自定义阴影动画。

3. 搜索/过滤/排序

在搜索中使用阴影。

4. 选择与批量操作

支持批量操作。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整阴影
• 支持键盘快捷键
• 提供清晰的视觉效果

实际应用场景

• 卡片设计：添加卡片阴影
• 按钮设计：添加按钮阴影
• 导航栏设计：添加导航栏阴影
• 浮动按钮：添加浮动按钮阴影

扩展建议

• 学习高级阴影库
• 研究性能优化
• 探索自定义效果
• 集成效果库

总结

Elevation 是创建视觉层次的重要方式。通过灵活使用 elevation，可以创建各种阴影效果。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net