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 布局层次分析层级组件职责外层Column卡片容器白色背景、圆角、阴影、左右 margin内层Row({ space: 12 })水平布局头像 信息 编辑按钮左列Column头像区域圆形裁剪、浅橙背景中列Column({ space: 4 })信息区域名称、品种、年龄右列Blank() Text弹性占位 编辑按钮2.2 间距设计// 卡片内外间距 Row({ space: 12 }) { // 头像与信息间距 12vp // ... } .padding(16) // 卡片内边距 16vp // 卡片外边距 .margin({ left: 16, right: 16 }) // 左右留边 16vp间距位置值作用卡片内边距16vp内容与卡片边框的距离卡片外边距16vp卡片与屏幕边缘的距离头像-信息间距12vp头像与文字区域的间距文字行间距4vp信息行之间的间距三、圆形头像实现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 时头像尺寸宽高borderRadius效果小头像48×4824小圆形中头像64×6432✅ 萌宠日记使用大头像80×8040宠物档案页使用超大100×10050个人中心使用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 阴影参数详解参数类型萌宠日记值说明radiusnumber4阴影模糊半径值越大阴影范围越广colorColor#10000000阴影颜色RGBA 格式10% 不透明度的黑色offsetXnumber未设置默认 0阴影水平偏移量offsetYnumber2阴影垂直偏移量向下偏移4.3 阴影颜色格式// RGBA 格式#AARRGGBB // AA 透明度00-FFRR 红色GG 绿色BB 蓝色 #10000000 // 10% 透明度的黑色最轻微的阴影 #20000000 // 12.5% 透明度的黑色轻微阴影 #40000000 // 25% 透明度的黑色中等阴影 #80000000 // 50% 透明度的黑色较重阴影五、卡片圆角与背景5.1 圆角配置.borderRadius(16) // 统一圆角四个角都是 16vp5.2 圆角模式模式语法效果统一圆角borderRadius(16)四个角相同分别设置borderRadius({ topLeft: 16, topRight: 16, bottomLeft: 16, bottomRight: 16 })每个角独立控制上圆角borderRadius({ topLeft: 16, topRight: 16 })仅上方圆角下圆角borderRadius({ bottomLeft: 16, bottomRight: 16 })仅下方圆角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 信息行设计信息行内容字号颜色字重第一行名称 性别标签20fp 12fp深灰 蓝色加粗 正常第二行品种 · 性别13fp灰色正常第三行年龄13fp灰色正常七、编辑按钮交互7.1 编辑按钮设计Text(✏️) .fontSize(20) .fontColor(#F5A623) .onClick(() { if (this.onNavigateToPetProfile) { this.onNavigateToPetProfile() // 触发父组件导航 } })7.2 交互反馈交互状态视觉反馈实现方式默认橙色fontColor(#F5A623)点击页面跳转onClick回调长按无可扩展可添加onLongClick八、卡片复用模式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 萌宠日记中的卡片模式萌宠日记中多处使用卡片式设计页面卡片用途共用样式首页宠物信息卡片白色背景、16px 圆角、阴影首页今日记录卡片同上宠物档案基本信息卡片同上宠物档案成长记录卡片同上社区活动横幅卡片同上九、卡片阴影性能9.1 阴影渲染性能阴影复杂度性能影响优化建议少量卡片≤ 5 个无影响—多个阴影叠加轻微减少阴影层叠大 radius 阴影轻微避免 radius 20动态阴影变化中等减少动画频率9.2 性能优化// 性能优化使用轻量阴影 .shadow({ radius: 4, // 小 radius性能更好 color: #10000000, // 低透明度减少渲染开销 offsetY: 2 // 小偏移量 })十、卡片设计最佳实践10.1 设计原则有序列表 — 卡片设计的 5 个原则信息分层最重要的信息放在卡片顶部名称次要信息放在下方品种、年龄视觉层次通过字号、字重、颜色区分信息层级交互可点可点击元素如编辑按钮应有明确的视觉提示间距统一卡片内外间距保持一致性推荐 16vp阴影适度阴影不宜过重轻微的阴影即可营造层次感10.2 萌宠日记卡片设计总结设计要素值设计意图背景色#FFFFFF纯白与页面背景区分圆角16vp柔和、现代感阴影radius: 4, color: #10000000, offsetY: 2轻微阴影增加层次感内边距16vp内容与卡片边缘的呼吸空间外边距16vp卡片与屏幕边缘的距离总结本文从萌宠日记的宠物信息卡片设计出发深入解析了卡片式布局的完整实现卡片结构外层容器 内层内容 Row 布局圆形头像borderRadius 实现圆形裁剪阴影效果shadow 属性的四个参数详解圆角与背景统一圆角、白色背景、对比度信息布局名称、性别标签、品种、年龄的层级设计编辑按钮交互反馈与导航触发卡片复用通用卡片组件的设计模式性能优化阴影渲染性能的考量卡片式设计是 ArkUI 中最常用的 UI 模式之一掌握它的设计细节能显著提升应用的视觉品质。下一篇我们将深入性别标签与状态徽章组件解析标签式组件的设计与实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源阴影属性参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-shadow-effectborder-radius 属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-borderColumn 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnRow 组件参考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