前言宠物档案页是萌宠日记中展示宠物核心信息的页面包含宠物头像、名称、品种、年龄、基本信息列表、成长记录等模块。该页面采用Scroll 嵌套 Column的布局模式配合卡片式设计将宠物信息清晰、有层次地呈现给用户。本文将从萌宠日记的 PetProfilePage 实现出发深入解析档案页的头像设计、布局结构、卡片组织以及如何通过视觉层次突出宠物核心信息。一、档案页整体布局1.1 页面结构┌─────────────────────────────────────┐ │ Scroll (可滚动) │ │ ┌─────────────────────────────────┐ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ 宠物头部卡片 │ │ │ │ │ │ ┌────┐ ┌──────────────┐ │ │ │ │ │ │ │ 头像│ │ 豆豆 ♂ │ │ │ │ │ │ │ │80×80│ │ 比熊犬·男孩 │ │ │ │ │ │ │ │ │ │ 2岁3个月 │ │ │ │ │ │ │ └────┘ └──────────────┘ │ │ │ │ │ │ ✏️ │ │ │ │ │ └───────────────────────────┘ │ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ 基本信息卡片 │ │ │ │ │ │ 生日: 2022-02-14 │ │ │ │ │ │ ─────────────────── │ │ │ │ │ │ 到家日: 2022-04-20 │ │ │ │ │ │ ─────────────────── │ │ │ │ │ │ 体重: 4.5 kg │ │ │ │ │ │ ... │ │ │ │ │ └───────────────────────────┘ │ │ │ │ ┌───────────────────────────┐ │ │ │ │ │ 成长记录卡片 │ │ │ │ │ │ [幼年] [6个月] [1岁] [2岁]│ │ │ │ │ └───────────────────────────┘ │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘1.2 核心代码// PetProfilePage.ets — 档案页布局 Entry Component export struct PetProfilePage { build() { Scroll() { Column({ space: 16 }) { // 1. 宠物头部卡片 this.PetHeaderCard() // 2. 基本信息卡片 this.BasicInfoCard() // 3. 成长记录卡片 this.GrowthRecordCard() } .padding({ left: 16, right: 16, top: 16, bottom: 24 }) } .width(100%) .height(100%) .backgroundColor(#FFF8F0) .scrollBar(BarState.Off) } }提示宠物档案页的布局结构与首页一脉相承采用Scroll Column 卡片的模式。每个卡片独立封装为Builder代码清晰、易于维护。二、宠物头部卡片2.1 完整实现// 宠物头部卡片 Builder PetHeaderCard() { Column() { Row({ space: 16 }) { // 头像 Column() { Text() .fontSize(48) } .width(80) .height(80) .backgroundColor(#FFF3E0) .borderRadius(40) .justifyContent(FlexAlign.Center) // 信息 Column({ space: 4 }) { Row({ space: 8 }) { Text(豆豆) .fontSize(22) .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) } .width(100%) .padding(16) } .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 }) }2.2 与首页宠物卡片的对比对比维度首页宠物卡片档案页宠物卡片头像尺寸64×64vp80×80vp更大名称字号20fp22fp更大卡片圆角16vp16vp一致阴影有有一致编辑按钮有有一致三、头像尺寸设计3.1 头像尺寸对比// 首页头像 — 64×64 Column() { Text().fontSize(40) } .width(64).height(64) .borderRadius(32) // 档案页头像 — 80×80 Column() { Text().fontSize(48) } .width(80).height(80) .borderRadius(40)3.2 头像尺寸选择使用场景尺寸borderRadius说明首页卡片64×6432紧凑展示档案页头部80×8040突出展示个人中心64×6432中等大小社区动态36×3618小尺寸列表四、信息布局细节4.1 信息层级Column({ space: 4 }) { // 第一行名称 性别标签 Row({ space: 8 }) { Text(豆豆).fontSize(22).fontWeight(FontWeight.Bold) Text(♂).fontSize(12).fontColor(#42A5F5) } // 第二行品种 Text(比熊犬 · 男孩).fontSize(13).fontColor(#999999) // 第三行年龄 Text(2岁3个月).fontSize(13).fontColor(#999999) } .alignItems(HorizontalAlign.Start)4.2 信息层级设计层级内容字号字重颜色重要性第一层宠物名称22fpBold深灰最高第一层性别标签12fpNormal蓝色辅助第二层品种 · 性别13fpNormal灰色中等第三层年龄13fpNormal灰色一般五、卡片容器设计5.1 卡片统一样式// 卡片容器统一样式 .width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })5.2 卡片间距// 卡片之间的间距由 Column 的 space 控制 Column({ space: 16 }) { this.PetHeaderCard() // 间距 16vp this.BasicInfoCard() // 间距 16vp this.GrowthRecordCard() // 底部 24vp padding }六、页面边距6.1 内外边距// 整个页面的边距 Scroll() { Column({ space: 16 }) { // 卡片... } .padding({ left: 16, right: 16, top: 16, bottom: 24 }) }边距位置值说明左右边距16vp与屏幕边缘距离顶部边距16vp与导航栏距离底部边距24vp底部留白避免贴底卡片间距16vp卡片之间的间距七、头像图片加载7.1 真实图片加载// 使用 Image 组件加载真实头像 Column() { Image($r(app.media.pet_avatar)) .width(80) .height(80) .borderRadius(40) .objectFit(ImageFit.Cover) // 裁剪填充保持比例 .onLoad(() { console.log(Avatar loaded) }) .onError(() { // 加载失败显示占位 Emoji Text().fontSize(48) }) }7.2 图片加载策略策略说明实现占位图加载时显示默认头像Emoji 占位缓存避免重复加载Image 组件默认缓存错误处理加载失败显示备选onError 回调裁剪模式保持比例裁剪objectFit: Cover八、响应式适配8.1 不同屏幕适配// 根据屏幕宽度调整卡片样式 StorageProp(screenWidth) screenWidth: number 360 getCardPadding(): number { return this.screenWidth 600 ? 24 : 16 } getAvatarSize(): number { return this.screenWidth 600 ? 100 : 80 }8.2 适配方案屏幕宽度头像尺寸卡片内边距字号 360vp72×7212vp20fp360-414vp80×8016vp22fp414-600vp88×8820vp24fp 600vp100×10024vp26fp九、无障碍适配9.1 头像无障碍Column() { Image($r(app.media.pet_avatar)) .width(80).height(80).borderRadius(40) } .accessibilityText(宠物头像豆豆)9.2 页面无障碍// 为整个卡片添加无障碍描述 Column() { // 卡片内容... } .accessibilityText(宠物信息卡片名称豆豆品种比熊犬年龄2岁3个月)十、最佳实践10.1 设计原则有序列表 — 档案页设计的 5 个原则头像突出宠物头像在页面上方尺寸适中一目了然信息分层名称 品种 年龄按重要性递减排列卡片统一所有卡片使用相同的圆角、阴影、背景色间距合理卡片间距 16vp内边距 16vp视觉舒适可编辑提示编辑按钮使用铅笔图标位置在右上角10.2 萌宠日记档案页设计总结设计要素值说明头像尺寸80×80vp比首页大突出显示名称字号22fp Bold页面最突出的文字卡片圆角16vp统一圆角风格卡片阴影radius: 4, offsetY: 2轻微阴影页面背景#FFF8F0暖白色卡片背景#FFFFFF纯白色左右边距16vp统一标准总结本文从萌宠日记的宠物档案页布局实现出发深入解析了档案页设计的完整方法页面结构Scroll Column 三张卡片头部卡片80×80 圆形头像 名称 品种 年龄头像尺寸不同场景使用不同尺寸64/80/36信息层级三级信息展示字号和颜色区分重要性卡片容器统一圆角、阴影、背景色页面边距16vp 标准边距视觉舒适图片加载占位图、缓存、错误处理响应式适配不同屏幕尺寸的自适应方案宠物档案页是萌宠日记中信息展示最集中的页面之一卡片式布局和信息分层设计为用户提供了清晰的数据浏览体验。下一篇我们将深入基本信息列表与 Divider 分隔线解析档案页中基本信息列表的实现。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Scroll 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scrollColumn 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-columnRow 组件参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-rowImage 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image阴影属性https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-shadow-effect圆角边框https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-border响应式布局https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit