HarmonyOS应用开发实战：萌宠日记 - 个人主页头部设计与数据展示 HarmonyOS应用开发实战萌宠日记 - 个人主页头部设计与数据展示前言个人主页头部是“我的“Tab 页面的品牌展示区域包含用户头像、昵称、签名等核心信息。在萌宠日记的ProfilePage中头部采用卡片式设计左侧为64×64 圆形头像右侧为昵称 签名右上角为设置入口底部为三列统计数据日记、关注、粉丝形成完整的个人身份展示区。本文将从萌宠日记中个人主页头部设计的实现出发深入解析头像布局、身份信息展示、卡片设计、统计数据的展示方式以及设置入口的交互设计。一、个人主页头部布局1.1 完整布局结构┌─────────────────────────────────────┐ │ ┌──────┐ ┌────────────────┐ ┌──┐ │ │ │ │ │ 萌宠家长 │ │⚙️│ │ │ │ 头像 │ │ 记录爱陪伴成长│ │ │ │ │ │ 64×64 │ └────────────────┘ └──┘ │ │ └──────┘ │ │ ───────────────────────────────────── │ │ 日记 关注 粉丝 │ │ 128 36 89 │ └─────────────────────────────────────┘1.2 完整代码// ProfilePage.ets — 个人主页头部 Column({ space: 12 }) { // 用户信息行 Row({ space: 16 }) { // 头像 Column() { Text() .fontSize(40) } .width(64).height(64) .backgroundColor(#FFF3E0) .borderRadius(32) .justifyContent(FlexAlign.Center) // 昵称和签名 Column({ space: 4 }) { Text(萌宠家长) .fontSize(18).fontWeight(FontWeight.Bold) .fontColor(#333333) Text(记录爱陪伴成长) .fontSize(13).fontColor(#999999) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) // 设置入口 Text(⚙️) .fontSize(22) .onClick(() { this.navigateToSettings() }) } .width(100%) // 统计数据 this.StatsRow() } .width(100%) .padding({ left: 16, right: 16, top: 16, bottom: 20 }) .backgroundColor(#FFFFFF) .borderRadius(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })二、头像设计2.1 圆形头像// 圆形头像 — 通过 borderRadius 实现 Column() { Text() .fontSize(40) // 占位 Emoji } .width(64) // 宽度 64vp .height(64) // 高度 64vp .backgroundColor(#FFF3E0) // 浅橙色背景 .borderRadius(32) // 圆角半径 宽/2 正圆形 .justifyContent(FlexAlign.Center) // 内容居中2.2 头像尺寸规范使用场景尺寸borderRadius说明个人主页64×6432标准大小宠物档案80×8040突出显示社区动态36×3618列表小头像首页卡片64×6432与个人主页一致三、身份信息布局3.1 昵称与签名Column({ space: 4 }) { Text(萌宠家长) .fontSize(18) .fontWeight(FontWeight.Bold) .fontColor(#333333) Text(记录爱陪伴成长) .fontSize(13) .fontColor(#999999) } .alignItems(HorizontalAlign.Start) .layoutWeight(1) // 撑满剩余空间3.2 信息层级层级内容字号字重颜色说明第一层昵称18fpBold#333333主要信息第二层签名13fpNormal#999999辅助信息四、设置入口4.1 设置按钮Text(⚙️) .fontSize(22) .onClick(() { this.navigateToSettings() })五、统计数据行5.1 三列统计Builder StatsRow() { Row({ space: 0 }) { Column({ space: 4 }) { Text(日记).fontSize(12).fontColor(#999999) Text(128).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#333333) } .layoutWeight(1).alignItems(HorizontalAlign.Center) Column({ space: 4 }) { Text(关注).fontSize(12).fontColor(#999999) Text(36).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#333333) } .layoutWeight(1).alignItems(HorizontalAlign.Center) Column({ space: 4 }) { Text(粉丝).fontSize(12).fontColor(#999999) Text(89).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#333333) } .layoutWeight(1).alignItems(HorizontalAlign.Center) } .width(100%) .padding({ top: 16 }) }六、卡片容器6.1 卡片样式.width(100%) .backgroundColor(#FFFFFF) .borderRadius(16) .shadow({ radius: 4, color: #10000000, offsetY: 2 })七、数据动态绑定7.1 动态数据State userName: string 萌宠家长 State userBio: string 记录爱陪伴成长 State diaryCount: number 128 State followCount: number 36 State followerCount: number 89八、编辑个人资料8.1 编辑入口// 点击头像或昵称编辑个人资料 Column() { Text() .fontSize(40) } .width(64).height(64) .backgroundColor(#FFF3E0) .borderRadius(32) .justifyContent(FlexAlign.Center) .onClick(() { this.navigateToEditProfile() })九、头像图片加载9.1 真实图片加载// 使用 Image 组件加载真实头像 Column() { Image($r(app.media.user_avatar)) .width(64).height(64) .borderRadius(32) .objectFit(ImageFit.Cover) .onLoad(() { console.log(Avatar loaded) }) .onError(() { // 加载失败显示 Emoji 占位 Text().fontSize(40) }) }9.2 头像选择// 点击头像选择新图片 Column() { // 头像内容 } .width(64).height(64) .backgroundColor(#FFF3E0) .borderRadius(32) .justifyContent(FlexAlign.Center) .onClick(() { this.selectAvatar() }) async selectAvatar(): Promisevoid { try { const picker new photoAccessHelper.PhotoPicker() const result await picker.select({ MIME_TYPE: [image/*], maxSelectCount: 1 }) if (result.photoUris.length 0) { this.userAvatar result.photoUris[0] } } catch (err) { console.error(Avatar select failed:, JSON.stringify(err)) } }十、无障碍适配10.1 无障碍描述// 为头像和设置按钮添加无障碍描述 Column() { Text().fontSize(40) } .width(64).height(64) .backgroundColor(#FFF3E0) .borderRadius(32) .accessibilityText(用户头像) Text(⚙️) .fontSize(22) .accessibilityText(设置)十一、个人主页卡片规范11.1 卡片规范设计要素值说明背景色#FFFFFF白色圆角16vp统一圆角阴影radius: 4, offsetY: 2轻微阴影内边距16vp标准内边距头像尺寸64×64圆形昵称字号18fp Bold突出签名字号13fp辅助11.2 与其他页面头部对比页面头像尺寸信息内容操作入口个人主页64×64昵称 签名⚙️ 设置宠物档案80×80名称 品种 年龄✏️ 编辑社区帖子36×36用户名 时间··· 更多十二、个人主页的响应式适配12.1 不同屏幕适配// 根据屏幕宽度调整头像和字号 StorageProp(screenWidth) screenWidth: number 360 get avatarSize(): number { return this.screenWidth 600 ? 80 : 64 } get userNameSize(): number { return this.screenWidth 600 ? 22 : 18 } get statsFontSize(): number { return this.screenWidth 600 ? 24 : 20 }12.2 适配方案屏幕宽度头像尺寸昵称字号统计数字 360vp56×5616fp18fp360-414vp64×6418fp20fp414-600vp72×7220fp22fp 600vp80×8022fp24fp十三、最佳实践13.1 个人主页头部设计原则有序列表 — 个人主页头部设计的 5 个原则头像突出圆形头像在左侧视觉焦点信息分层昵称 签名字号和颜色区分层级统计直观三列等宽数字大字突出设置入口右上角齿轮图标符合用户习惯卡片统一与全局卡片风格一致10.2 萌宠日记个人主页头部总结区域组件内容作用左侧Column头像品牌识别中间Column昵称 签名身份展示右上Text⚙️ 设置功能入口底部Row三列统计数据展示总结本文从萌宠日记的个人主页头部设计实现出发深入解析了个人主页头部的完整方案布局结构头像 昵称 签名 设置 统计头像设计64×64 圆形浅橙背景身份信息18fp 昵称 13fp 签名信息分层设置入口⚙️ 齿轮图标右上角三列统计layoutWeight 等分标题 数字卡片容器白色背景 圆角 阴影动态数据State 绑定用户数据编辑入口点击头像编辑个人资料头像图片加载Image 组件 onLoad/onError 处理无障碍适配accessibilityText 描述响应式适配不同屏幕尺寸动态调整13.3 常见问题排查问题可能原因解决方案头像不显示图片路径错误检查 Image 组件的 src 路径统计数字不更新State 未正确绑定检查状态更新逻辑卡片阴影不显示父容器裁剪检查父容器是否设置了 overflow: hidden布局错乱屏幕适配问题添加响应式适配代码如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Column 组件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-references/arkts-shadow-effect卡片设计指南https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/design-cardsState 装饰器https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state无障碍开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/accessibility-kit布局基础https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-layout开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net响应式布局https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layoutImage 组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-imagePhotoPicker 使用https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/photo-picker响应式布局指导https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/responsive-layout应用用户数据管理https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/data-mgmt-overview应用配置管理https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-configuration-file-stage用户数据管理https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/data-mgmt-overview应用组件开发https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components