HarmonyOS开发实战：小分享-ProfilePage个人中心——用户信息卡+统计数据+菜单列表

发布时间：2026/10/13 17:58:06

HarmonyOS开发实战：小分享-ProfilePage个人中心——用户信息卡+统计数据+菜单列表
前言个人中心是用户管理个人信息和进入各功能模块的入口通常包含用户头像、统计数据、菜单列表。小分享 App 的 ProfilePage 使用 Builder 封装统计项和菜单项。本篇讲解圆形头像、三栏统计、菜单列表等。详细 API 可参考 HarmonyOS ArkUI 组件官方文档。一、ProfilePage 完整代码import router from ohos.router; import { BottomTabBar } from ../components/BottomTabBar; import { MenuItem } from ../common/interfaces; Entry Component struct ProfilePage { private menuItems: ArrayMenuItem [ { icon: , label: 我的模板, page: pages/TemplateSelectPage }, { icon: ⭐, label: 我的收藏, page: pages/FavoritesPage }, { icon: , label: 分享历史, page: }, { icon: , label: 意见反馈, page: }, { icon: , label: 设置, page: pages/SettingsPage }, { icon: , label: 关于我们, page: } ]; build() { Column() { Scroll() { Column({ space: 0 }) { // 用户信息卡 Column({ space: 12 }) { Row({ space: 16 }) { Column() { Text().fontSize(36) } .width(64).height(64).backgroundColor(#F5A623).borderRadius(32) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) Column({ space: 6 }) { Text(小分享用户).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#1A1A1A) Text(分享点亮生活).fontSize(13).fontColor(#999999) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text().fontSize(22).fontColor(#999999) } .width(100%) } .width(100%).padding(20).backgroundColor(Color.White) // 三栏统计 Row({ space: 0 }) { this.StatItem(128, 分享) this.StatItem(56, 收藏) this.StatItem(32, 模板) } .width(100%).backgroundColor(Color.White).padding({ bottom: 20 }) // 菜单列表 Column({ space: 0 }) { ForEach(this.menuItems, (item: MenuItem, index: number) { Row({ space: 12 }) { Text(item.icon).fontSize(20) Text(item.label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Text(›).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 20, right: 20, top: 16, bottom: 16 }).backgroundColor(Color.White) .onClick(() { if (item.page) { router.pushUrl({ url: item.page }) } }) if (index this.menuItems.length - 1) { Divider().color(#F5F5F5).strokeWidth(0.5) } }, (item: MenuItem, index: number) item.label) } .width(100%).margin({ top: 12 }).borderRadius(12) } .padding({ bottom: 80 }) } .layoutWeight(1).scrollBar(BarState.Off) BottomTabBar({ currentIndex: 4 }) } .width(100%).height(100%).backgroundColor(#F5F5F5) } Builder StatItem(value: string, label: string) { Column({ space: 4 }) { Text(value).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1A1A1A) Text(label).fontSize(12).fontColor(#999999) } .layoutWeight(1).alignItems(HorizontalAlign.Center) } }二、圆形头像Column() { Text().fontSize(36) } .width(64).height(64) .backgroundColor(#F5A623) .borderRadius(32) // 圆角 宽/2 32 .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center)三、三栏统计Builder StatItem(value: string, label: string) { Column({ space: 4 }) { Text(value).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1A1A1A) Text(label).fontSize(12).fontColor(#999999) } .layoutWeight(1).alignItems(HorizontalAlign.Center) }四、菜单列表ForEach(this.menuItems, (item: MenuItem, index: number) { Row({ space: 12 }) { Text(item.icon).fontSize(20) Text(item.label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Text(›).fontSize(18).fontColor(#CCCCCC) } .onClick(() { if (item.page) { router.pushUrl({ url: item.page }) } }) if (index this.menuItems.length - 1) { Divider().color(#F5F5F5).strokeWidth(0.5) } })五、本文核心知识点5.1 个人中心核心要点圆形头像用 borderRadius(32) 实现Builder 封装统计项菜单列表包含图标、标签、箭头5.2 实战开发要点圆形头像宽高相等borderRadius 宽/2统计项 layoutWeight(1) 三栏均分菜单项空 page 时不跳转附录个人中心的完整实现细节1. 完整的页面布局结构Column (主容器背景 #F5F5F5) ├─ Scroll (可滚动内容区) - layoutWeight(1) │ └─ Column (space: 0) │ ├─ Column (用户信息卡白色背景) │ │ ├─ Row (头像 昵称 编辑) │ │ │ ├─ Column (头像) 64×64 #F5A623 borderRadius 32 │ │ │ ├─ Column (昵称 签名) │ │ │ └─ Text() 编辑图标 │ │ └─ Row (三栏统计) │ │ ├─ StatItem(128, 分享) │ │ ├─ StatItem(56, 收藏) │ │ └─ StatItem(32, 模板) │ └─ Column (菜单列表白色背景) │ ├─ Row (我的模板) › │ ├─ Divider │ ├─ Row (我的收藏) › │ ├─ Divider │ ├─ Row (分享历史) › │ ├─ Divider │ ├─ Row (意见反馈) › │ ├─ Divider │ ├─ Row (设置) › │ ├─ Divider │ └─ Row (关于我们) › └─ BottomTabBar (底部导航) - currentIndex: 42. 圆形头像的完整实现Column() { Text().fontSize(36) } .width(64).height(64).backgroundColor(#F5A623).borderRadius(32) .justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)3. 三栏统计的完整实现Builder StatItem(value: string, label: string) { Column({ space: 4 }) { Text(value).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#1A1A1A) Text(label).fontSize(12).fontColor(#999999) } .layoutWeight(1).alignItems(HorizontalAlign.Center) }4. 菜单列表的完整实现ForEach(this.menuItems, (item: MenuItem, index: number) { Row({ space: 12 }) { Text(item.icon).fontSize(20) Text(item.label).fontSize(15).fontColor(#1A1A1A).layoutWeight(1) Text(›).fontSize(18).fontColor(#CCCCCC) } .width(100%).padding({ left: 20, right: 20, top: 16, bottom: 16 }).backgroundColor(Color.White) .onClick(() { if (item.page) { router.pushUrl({ url: item.page }) } }) if (index this.menuItems.length - 1) { Divider().color(#F5F5F5).strokeWidth(0.5) } }, (item: MenuItem, index: number) item.label)5. 数据模型export interface MenuItem { icon: string; label: string; page: string; }6. 完整代码文件索引文件路径说明pages/ProfilePage.ets个人中心页面common/interfaces.etsMenuItem 接口定义components/BottomTabBar.ets底部导航组件7. 本文涉及的所有 APIAPI/组件用途文档链接BuilderUI 复用Builder GuideDivider分割线Dividerrouter.pushUrl()路由跳转RouterScroll可滚动容器ScrollForEach循环渲染ForEachBottomTabBar底部导航自定义组件8. 实现要点总结个人中心的核心实现要点圆形头像widthheight64,borderRadius32实现正圆三栏统计Builder StatItem封装layoutWeight(1)均分菜单列表ForEach循环渲染 Divider分割线路由跳转item.page为空时不跳转9. 总结本文详细讲解了 ProfilePage 个人中心的完整实现涵盖圆形头像、三栏统计、菜单列表等核心功能。下一篇我们将深入 SettingsPage 设置页的实现。相关资源HarmonyOS Builder 装饰器Builder GuideHarmonyOS Divider 组件Divider ReferenceHarmonyOS Router 路由Router APIHarmonyOS Scroll 组件Scroll ComponentHarmonyOS ForEach 渲染ForEach ReferenceHarmonyOS Row 组件Row ComponentHarmonyOS borderRadius 属性BorderRadius开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net本文涉及的所有 API 索引API类别用途Column布局容器垂直排列子组件Row布局容器水平排列子组件Text基础组件显示文本ForEach渲染控制循环渲染列表State装饰器组件内状态管理Builder装饰器封装可复用 UI 片段router.pushUrl路由页面跳转router.back路由返回上一页总结本文详细讲解了小分享 App 中对应页面的完整实现。核心知识点涵盖布局容器、组件封装、状态管理、路由跳转等关键技术。通过本文的学习读者可以掌握 HarmonyOS ArkUI 声明式开发的核心技能并能够独立实现类似的页面功能。14. 页面功能总结功能模块实现方式核心组件用户头像圆形 ColumnborderRadius(32)统计数据Builder StatItemlayoutWeight(1) 均分菜单列表ForEach 循环Divider 分割线路由跳转router.pushUrl条件判断 page 非空15. 完整的代码结构ProfilePage ├── 用户信息卡 (Column) │ ├── 头像 (Column 64×64) │ ├── 昵称 (Text 18px Bold) │ └── 签名 (Text 13px) ├── 三栏统计 (Row) │ ├── 分享数 (StatItem) │ ├── 收藏数 (StatItem) │ └── 模板数 (StatItem) └── 菜单列表 (Column) ├── 我的模板 (MenuItem) ├── 我的收藏 (MenuItem) ├── 分享历史 (MenuItem) ├── 意见反馈 (MenuItem) ├── 设置 (MenuItem) └── 关于我们 (MenuItem)如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力

相关新闻

基于YOLOv5的草莓品质检测系统开发与实践

基于YOLOv5的草莓品质检测系统开发与实践

1. 项目背景与核心价值去年帮农科院做草莓品质检测时，发现传统人工分拣效率低且误差率高。一个熟练工每小时最多处理200颗草莓，而基于深度学习的视觉系统能轻松突破2000颗/小时。这个毕设项目正是瞄准农业生产中的真实痛点——如何快速准确地识别草莓并判…

2026/10/3 17:48:27 阅读更多 →
【单片机毕业设计推荐】基于 STM32 的智能人体安全监测报警装置设计与实现 ，基于 STM32 的老年人跌倒防护与定位预警系统设计（013503）

【单片机毕业设计推荐】基于 STM32 的智能人体安全监测报警装置设计与实现 ，基于 STM32 的老年人跌倒防护与定位预警系统设计（013503）

文章目录20 个相关毕业设计备选题目项目研究背景摘要总体方案核心功能技术路线项目演示关于我们项目案例源码获取博主介绍：✌️码农一枚 ，专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者，博客之星、掘金…

2026/10/11 14:29:38 阅读更多 →
Unity 2D游戏智能寻路：NavMeshPlus集成与实战指南

Unity 2D游戏智能寻路：NavMeshPlus集成与实战指南

1. 项目概述：为什么2D游戏也需要“智能寻路”？ 在开发2D游戏，尤其是俯视角、横版卷轴或者策略类游戏时，我们经常会遇到一个核心需求：如何让游戏中的角色（NPC、敌人、我方单位）能够智能地绕过障碍…

2026/10/7 7:56:29 阅读更多 →

最新新闻

PS中英文对照表制作指南：从菜单导出到PDF生成与版本维护

PS中英文对照表制作指南：从菜单导出到PDF生成与版本维护

简介：这份PS中英文对照表PDF面向Photoshop初学者及需要查阅英文界面术语的设计从业者，帮助解决中文版与英文版菜单名称对应困难、切换语言环境后找不到功能入口的问题。资源包共1个PDF文件，大小约18KB，轻量易存，适合打…

2026/10/13 17:57:33 阅读更多 →
23个AI角色协同开发：gstack如何重构软件研发流程

23个AI角色协同开发：gstack如何重构软件研发流程

第一次跑通 gstack 的完整流程时，我在终端里看到的不是一行行的错误日志，而是一群 AI 在互相评审、打回、修改、验证，最后交给我一份可以直接启动的前后端工程。那感觉很像你刚入职一家新公司，站会上产品、前端、后端、测试坐在一…

2026/10/13 17:57:33 阅读更多 →
PDMS出图全流程实战：从ADP自动出图到DRAFT手动标注与打印

PDMS出图全流程实战：从ADP自动出图到DRAFT手动标注与打印

简介：这份PDF面向工厂三维布置设计领域的技术人员与PDMS初学者，系统讲解Plant Design Management System中的出图功能，帮助读者掌握从模型到施工图纸的完整流程。内容围绕自动出图（ADP）与手动出图（DRAFT&am…

2026/10/13 17:57:33 阅读更多 →
Java核心知识点实战梳理：集合、并发、JVM与Java 8新特性

Java核心知识点实战梳理：集合、并发、JVM与Java 8新特性

很多人问我，Java知识点那么多，到底该怎么梳理？网上的资料五花八门，有的讲原理讲到源码深处，有的又浅得跟没讲一样。我自己从写业务代码到啃源码，再到现在带团队做技术评审，踩过的坑不少&#xf…

2026/10/13 17:57:33 阅读更多 →
Python第二次作业深度解析：数据流、面向对象与异常处理实战

Python第二次作业深度解析：数据流、面向对象与异常处理实战

1. 作业概览：这绝不是一次简单的“课后练习”如果你只把这份“Python第二次作业”当成一次常规的语法巩固训练，那可能真的低估它了。我在实际批改和复现这类作业时发现，很多同学的卡点并不在“会不会写代码”，而在“能不能把学过的…

2026/10/13 17:57:33 阅读更多 →
弗洛伊德解梦：噩梦为何也是潜意识的愿望满足？

弗洛伊德解梦：噩梦为何也是潜意识的愿望满足？

你有没有做过这种梦：明天就要交一份至关重要的方案，梦里你却发现自己连文件都找不到，或者更离谱，直接站在空无一人的考场里，试卷上的字全在飘。惊醒之后心跳半天才缓过来，第一反应往往是“这梦太丧了”。但…

2026/10/13 17:56:30 阅读更多 →

日新闻

物联网系统集成避坑指南：从选型到验收的关键要点

物联网系统集成避坑指南：从选型到验收的关键要点

做了这么多年物联网系统集成的项目，我最大的感受是，大部分坑不是出在技术前沿，而是出在一些看起来很平常的地方。设备选了便宜的、协议没问清楚、现场没摸透、验收标准写得含糊——这些细枝末节，最后都会变成延期、超支和扯皮的大…

2026/10/13 0:00:57 阅读更多 →
ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

ESP32舵机控制全攻略：从PWM原理到高级玩法与常见故障排查

如果你玩ESP32有一阵子了，很难不碰到舵机控制这道坎。做智能小车要转方向，做机械臂要抬关节，做云台要偏航俯仰，背后都是同一个东西在干活：舵机。而我见过太多人卡在“代码能编译、舵机就是不听话”这个阶段&#xff0c…

2026/10/13 0:00:57 阅读更多 →
CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

CAN总线原理与STM32实战：抗干扰、仲裁、错误处理全解析

1. 为什么CAN总线至今仍是工业现场的“硬通货”？——从汽车底盘到智能温室的真实需求你有没有拆过一辆老款燃油车的中控台？或者调试过某高校实验室里那台跑着Modbus协议却频频丢帧的PLC控制柜？又或者，在某个农业物联网项目里&…

2026/10/13 0:00:57 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/13 2:54:56 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/13 16:22:04 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/13 1:58:08 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 21:05:09 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 18:11:17 阅读更多 →