Shadow 阴影体系：多层级阴影提升视觉层次

前言

阴影是 UI 设计中提升视觉层次感的重要手段。"海风日记"在 Color.ets 中定义了完整的阴影颜色令牌体系，并在多个组件中使用了不同层级的阴影效果。

本文将从源码出发，深入讲解阴影属性配置、颜色令牌设计以及多层级阴影的最佳实践。

---

一、阴影属性

1.1 基本语法

.shadow({
  radius: 12,                              // 模糊半径
  color: 'rgba(160,120,60,0.10)',          // 阴影颜色
  offsetX: 0,                              // 水平偏移
  offsetY: 2                               // 垂直偏移
})

1.2 参数说明

参数	类型	说明	默认值
radius	number	模糊半径，值越大阴影越模糊	0
color	string	阴影颜色，支持透明度	黑色
offsetX	number	水平偏移，正数向右	0
offsetY	number	垂直偏移，正数向下	0

---

二、阴影颜色令牌

2.1 颜色常量

// 卡片阴影颜色
export const COLOR_CARD_SHADOW = '#19A0783C'

// 阴影颜色 - 不同透明度
export const COLOR_SHADOW_PRIMARY_LIGHT = 'rgba(245,166,35,0.25)'
export const COLOR_SHADOW_PRIMARY_MID = 'rgba(245,166,35,0.30)'
export const COLOR_SHADOW_PRIMARY_DEEP = 'rgba(245,166,35,0.40)'
export const COLOR_SHADOW_AMBER = 'rgba(160,120,60,0.08)'
export const COLOR_SHADOW_LIGHT = 'rgba(160,120,60,0.06)'

2.2 阴影层级

层级	颜色常量	效果	使用场景
浅	COLOR_SHADOW_LIGHT	极淡阴影	设置菜单卡片
中	COLOR_SHADOW_AMBER	柔和阴影	正文卡片
中高	COLOR_CARD_SHADOW	标准阴影	日记卡片
高	COLOR_SHADOW_PRIMARY_MID	橙色高亮阴影	按钮、浮动按钮

---

三、不同场景的阴影配置

3.1 日记卡片

.shadow({ radius: 12, color: 'rgba(160,120,60,0.10)', offsetY: 2 })

3.2 浮动按钮

.shadow({ radius: 16, color: 'rgba(245,166,35,0.40)', offsetX: 0, offsetY: 4 })

3.3 渐变卡片

.shadow({ radius: 20, color: 'rgba(245,166,35,0.30)', offsetY: 6 })

3.4 登录按钮

.shadow({ radius: 16, color: 'rgba(245,166,35,0.35)', offsetY: 4 })

3.5 设置菜单卡片

.shadow({ radius: 8, color: 'rgba(160,120,60,0.06)', offsetY: 2 })

---

四、阴影对比

场景	radius	color	offsetY	视觉强度
设置卡片	8	极淡	2	最弱
日记卡片	12	淡	2	中
正文卡片	12	柔和	2	中
渐变卡片	20	橙色	6	强
浮动按钮	16	亮橙	4	最强

---

五、常见问题

5.1 阴影不显示

问题：设置了 shadow 属性但阴影不显示。

原因 ：shadow 需要配合 background 使用，且背景不能是透明。

解决方案：确保组件有非透明的背景色。

---

总结

本文通过"海风日记"的阴影体系，深入讲解了 shadow 属性的配置：

1. shadow 属性：radius、color、offsetX、offsetY
2. 颜色令牌：5 个阴影颜色常量
3. 多层级阴影：从浅到强的 5 个层级
4. 场景配置：不同组件的阴影参数

下一篇文章将深入讲解 aboutToAppear 生命周期，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

---

相关资源：

• Shadow 属性文档
• Colors.ets 色彩管理
• 海风日记项目源码
• HarmonyOS 开发者官网(https://atomgit.com/openharmony/docs
• 开源鸿蒙跨平台社区