HarmonyOS应用开发实战：萌宠日记 - 宠物信息卡片设计与阴影效果

前言

卡片式设计是移动应用中最常用的信息展示方式之一。在萌宠日记的首页中，宠物信息卡片是最核心的视觉元素，它展示了宠物头像、名称、性别、品种、年龄等关键信息，并通过阴影效果营造出层次感和立体感。

本文将从萌宠日记的宠物信息卡片实现出发，深入解析卡片布局设计、阴影效果配置、圆形头像裁剪、以及卡片式设计的通用模式。

一、宠物信息卡片整体设计

1.1 卡片结构

┌─────────────────────────────────────┐ │ ┌──────┐ ┌────────────────────┐ │ │ │ │ │ 豆豆 ♂ │ │ │ │ 头像 │ │ 比熊犬 · 男孩 │ │ │ │ 64×64 │ │ 2岁3个月 │ │ │ │ │ │ │ │ │ └──────┘ └────────────────────┘ │ │ ✏️ 编辑 │ └─────────────────────────────────────┘

1.2 完整代码

// HomePage.ets — 宠物信息卡片 // 宠物信息卡片 Column() { Row({ space: 12 }) { // 宠物头像 Column() { Text('') .fontSize(40) } .width(64) .height(64) .backgroundColor('#FFF3E0') .borderRadius(32) .justifyContent(FlexAlign.Center) // 宠物信息 Column({ space: 4 }) { Row({ space: 8 }) { Text('豆豆') .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor('#333333') Text('♂') .fontSize(12) .fontColor('#42A5F5') .backgroundColor('#E3F2FD') .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) } Text('比熊犬 · 男孩') .fontSize(13) .fontColor('#999999') Text('2岁3个月') .fontSize(13) .fontColor('#999999') } .alignItems(HorizontalAlign.Start) Blank() // 编辑按钮 Text('✏️') .fontSize(20) .fontColor('#F5A623') .onClick(() => { if (this.onNavigateToPetProfile) { this.onNavigateToPetProfile() } }) } .width('100%') .padding(16) } .width('100%') .backgroundColor('#FFFFFF') .borderRadius(16) .margin({ left: 16, right: 16 }) .shadow({ radius: 4, color: '#10000000', offsetY: 2 })

提示：卡片的外层 Column 负责白色背景、圆角、阴影，内层 Row 负责内容布局。这种内外层分离的设计模式，让卡片样式和内容逻辑互不干扰。

二、卡片布局设计

2.1 布局层次分析

2.2 间距设计

// 卡片内外间距 Row({ space: 12 }) { // 头像与信息间距 12vp // ... } .padding(16) // 卡片内边距 16vp // 卡片外边距 .margin({ left: 16, right: 16 }) // 左右留边 16vp

三、圆形头像实现

3.1 圆形裁剪原理

// 圆形头像 — 通过 borderRadius 实现 Column() { Text('') // 头像图标（当前为占位空文本） .fontSize(40) } .width(64) // 宽度 = 64 .height(64) // 高度 = 64（与宽度相同） .backgroundColor('#FFF3E0') // 浅橙色背景 .borderRadius(32) // 圆角半径 = 宽/2 = 32 → 正圆形 .justifyContent(FlexAlign.Center) // 内容居中

圆形裁剪的公式：

borderRadius = width / 2 （当 width === height 时）

3.2 头像占位设计

// 当前为文字占位，后续可替换为真实图片 Column() { Image($r('app.media.pet_avatar')) .width(64) .height(64) .borderRadius(32) .objectFit(ImageFit.Cover) }

四、阴影效果配置

4.1 shadow 属性

// 卡片阴影效果 .shadow({ radius: 4, // 阴影模糊半径（越大越模糊） color: '#10000000', // 阴影颜色（RGBA 格式） offsetX: 0, // 水平偏移 offsetY: 2 // 垂直偏移（向下偏移 2vp） })

4.2 阴影参数详解

4.3 阴影颜色格式

// RGBA 格式：'#AARRGGBB' // AA = 透明度（00-FF），RR = 红色，GG = 绿色，BB = 蓝色 '#10000000' // 10% 透明度的黑色，最轻微的阴影 '#20000000' // 12.5% 透明度的黑色，轻微阴影 '#40000000' // 25% 透明度的黑色，中等阴影 '#80000000' // 50% 透明度的黑色，较重阴影

五、卡片圆角与背景

5.1 圆角配置

.borderRadius(16) // 统一圆角，四个角都是 16vp

5.2 圆角模式

5.3 白色背景

.backgroundColor('#FFFFFF') // 纯白背景，与页面背景色 '#FFF8F0' 形成对比

六、信息布局细节

6.1 名称 + 性别标签

Row({ space: 8 }) { Text('豆豆') // 宠物名称 .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor('#333333') Text('♂') // 性别标签 .fontSize(12) .fontColor('#42A5F5') .backgroundColor('#E3F2FD') .padding({ left: 6, right: 6, top: 2, bottom: 2 }) .borderRadius(8) }

6.2 信息行设计

七、编辑按钮交互

7.1 编辑按钮设计

Text('✏️') .fontSize(20) .fontColor('#F5A623') .onClick(() => { if (this.onNavigateToPetProfile) { this.onNavigateToPetProfile() // 触发父组件导航 } })

7.2 交互反馈

八、卡片复用模式

8.1 通用卡片组件

// 通用卡片组件 — 可复用的卡片样式 @Component export struct Card { @Prop backgroundColor: string = '#FFFFFF' @Prop borderRadius: number = 16 build() { Column() { // 卡片内容通过 slot 传入 } .width('100%') .backgroundColor(this.backgroundColor) .borderRadius(this.borderRadius) .shadow({ radius: 4, color: '#10000000', offsetY: 2 }) } }

8.2 萌宠日记中的卡片模式

萌宠日记中多处使用卡片式设计：

九、卡片阴影性能

9.1 阴影渲染性能

9.2 性能优化

// 性能优化：使用轻量阴影 .shadow({ radius: 4, // 小 radius，性能更好 color: '#10000000', // 低透明度，减少渲染开销 offsetY: 2 // 小偏移量 })

十、卡片设计最佳实践

10.1 设计原则

有序列表 — 卡片设计的 5 个原则：

1. 信息分层：最重要的信息放在卡片顶部（名称），次要信息放在下方（品种、年龄）
2. 视觉层次：通过字号、字重、颜色区分信息层级
3. 交互可点：可点击元素（如编辑按钮）应有明确的视觉提示
4. 间距统一：卡片内外间距保持一致性（推荐 16vp）
5. 阴影适度：阴影不宜过重，轻微的阴影即可营造层次感

10.2 萌宠日记卡片设计总结

总结

本文从萌宠日记的宠物信息卡片设计出发，深入解析了卡片式布局的完整实现：

1. 卡片结构：外层容器 + 内层内容 Row 布局
2. 圆形头像：borderRadius 实现圆形裁剪
3. 阴影效果：shadow 属性的四个参数详解
4. 圆角与背景：统一圆角、白色背景、对比度
5. 信息布局：名称、性别标签、品种、年龄的层级设计
6. 编辑按钮：交互反馈与导航触发
7. 卡片复用：通用卡片组件的设计模式
8. 性能优化：阴影渲染性能的考量

卡片式设计是 ArkUI 中最常用的 UI 模式之一，掌握它的设计细节能显著提升应用的视觉品质。

下一篇我们将深入性别标签与状态徽章组件，解析标签式组件的设计与实现。

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

相关资源：

• 阴影属性参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-shadow-effect
• border-radius 属性：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border
• Column 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-column
• Row 组件参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-row
• 卡片设计指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cards
• 颜色使用规范：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/color-usage
• 字体排版指南：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/typography
• 交互反馈设计：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/interaction-feedback