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

发布时间：2026/7/24 17:21:15

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/7/24 17:20:15 阅读更多 →
【单片机毕业设计推荐】基于 STM32 的智能人体安全监测报警装置设计与实现 ，基于 STM32 的老年人跌倒防护与定位预警系统设计（013503）

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

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

2026/7/24 17:20:15 阅读更多 →
Unity 2D游戏智能寻路：NavMeshPlus集成与实战指南

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

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

2026/7/24 17:20:15 阅读更多 →

最新新闻

银行票据OCR系统：3周实现7倍效率提升的工程实践

银行票据OCR系统：3周实现7倍效率提升的工程实践

1. 项目背景与核心价值在数字化转型浪潮中，纸质文档电子化处理已成为企业降本增效的关键环节。我们团队最近完成了一个银行票据识别系统，仅用3周时间将日均处理量从2000份提升至15000份，准确率保持在98.5%以上。这个案例让我深刻认识到&#…

2026/7/24 17:27:20 阅读更多 →
自监督学习如何提升AI推理与泛化能力

自监督学习如何提升AI推理与泛化能力

1. 自监督学习如何重塑AI推理能力在计算机视觉实验室里，我们常常遇到这样的困境：标注100万张ImageNet图像需要超过2万人工小时，而自监督学习让模型直接从原始数据中挖掘规律。这种范式转变正在深刻影响AI系统的推理能力构建方式。去年我们在医…

2026/7/24 17:27:19 阅读更多 →
手机号码定位查询：5分钟掌握开源工具location-to-phone-number的完整使用指南

手机号码定位查询：5分钟掌握开源工具location-to-phone-number的完整使用指南

手机号码定位查询：5分钟掌握开源工具location-to-phone-number的完整使用指南 【免费下载链接】location-to-phone-number This a project to search a location of a specified phone number, and locate the map to the phone number location. 项目地址: https…

2026/7/24 17:26:18 阅读更多 →
JSON字段读写变慢12倍？扣子数据库原生函数优化实战（含BenchMark对比数据）

JSON字段读写变慢12倍？扣子数据库原生函数优化实战（含BenchMark对比数据）

更多请点击： https://intelliparadigm.com 第一章：JSON字段读写变慢12倍？扣子数据库原生函数优化实战（含BenchMark对比数据） 在扣子数据库（CozeDB）中直接使用通用序列化/反序列化逻辑操作 JSON…

2026/7/24 17:26:18 阅读更多 →
基于SimpleLink MCU的MSP430 SBW两线制编程实战指南

基于SimpleLink MCU的MSP430 SBW两线制编程实战指南

1. 项目概述如果你正在开发基于德州仪器（TI）MSP430系列微控制器的产品，无论是原型验证、小批量生产，还是现场固件升级，都绕不开一个核心环节：如何把编译好的程序代码可靠地“灌入”芯片。传统的四线或更多线…

2026/7/24 17:26:18 阅读更多 →
MAESTRO项目：多模态地球观测数据的智能解码与应用

MAESTRO项目：多模态地球观测数据的智能解码与应用

1. MAESTRO项目概述：多模态地球观测数据的智能解码器地球观测数据正经历前所未有的爆炸式增长——每天约有20TB的遥感影像从数百颗卫星传回地面站。这些数据包含可见光、红外、雷达等多光谱信息，覆盖同一区域不同时间段的时序记录，形成复杂的…

2026/7/24 17:26:18 阅读更多 →

日新闻

用Highcharts 创建可拖拽三维散点立方体3D图表

用Highcharts 创建可拖拽三维散点立方体3D图表

该案例基于Highcharts scatter3d 三维散点图实现空间立方体散点可视化，核心特色：三维 X/Y/Z 三轴空间，所有散点分布在 0~10 立方体空间内；散点使用径向渐变实现立体 3D 圆球质感；支持鼠标 / 触屏拖拽画布，…

2026/7/24 0:00:29 阅读更多 →
AppCertDlls：进程创建路径上的 DLL 入口

AppCertDlls：进程创建路径上的 DLL 入口

AppCertDlls：进程创建路径上的 DLL 入口 AppCertDlls 位于 HKLM\System\CurrentControlSet\Control\Session Manager\AppCertDlls。本文的程序功能是只读列出这个键在 64 位和 32 位注册表视图中的全部值，并显示每条值的来源、名称、类型和可安全显示的数…

2026/7/24 0:00:29 阅读更多 →
我的编程之路：第一篇博客

我的编程之路：第一篇博客

大家好，我是一名编程初学者，同时这也是我编程学习之路上的第一篇博客。在这里，我想要向大家介绍我的一些想法和规划。a.自我介绍我是一个刚刚接触编程的新手，目前在学习c语言，我对编程世界充满了强烈的好奇。当然&…

2026/7/24 0:00:29 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/24 3:59:20 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/24 1:23:39 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/23 17:49:47 阅读更多 →

月新闻