前言个人中心是用户管理个人信息和进入各功能模块的入口通常包含用户头像、统计数据、菜单列表。小分享 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)如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力
企业数字化 ERP 产品动态
相关推荐
NCMDump终极指南：3步轻松解密网易云音乐NCM文件，实现音乐自由播放 NCMDump终极指南：3步轻松解密网易云音乐NCM文件，实现音乐自由播放 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump
你是否曾经在网易云音乐下载了心爱的歌曲，却发现只能在特定客户端播放࿱… · 2026/9/25 3:15:00
HarmonyOS开发实战：小分享-TemplateDetailPage模板详情——预览信息标签 前言
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
模板详情页 展示模板的完整预览、使用量、标签和描述信息，底部提供「使用此模板」按钮。小分享 App 的 TemplateDetailPage 使用 Builder 封装标签胶囊、局部圆角、底部固… · 2026/9/19 3:45:26
AI替身开发实战：从提示词到Agent的团队资源优化指南 1. 从“人手不够”到“AI上岗”：我为什么开始认真对待AI替身先说个背景。去年年中我手上有个项目，排期压得特别死：一个内部管理系统的重构，前后端一起动，团队只有六个人，还赶上两位同事被临时抽调去支援别的… · 2026/9/26 20:16:03
鸿蒙Flutter大文件上传：分片传输与断点续传适配实战 做上传功能最怕的就是文件传到一半网断了，尤其是几十上百 MB 的日志包和视频素材。你在 Flutter 项目里找了半天，发现 chunked_uploader 这个三方库正好支持分片传输和断点续传，本来以为加上去就能收工，结果一到鸿蒙设备上就各种水… · 2026/9/26 20:15:57
BES2600烧录工具V1.46实战指南：从驱动到量产全流程解析 简介：面向BES2300、BES2500及BES2600系列芯片的烧录工具，专供嵌入式开发者在Windows平台进行固件烧录、更新与调试。工具针对BES芯片深度优化，支持多型号programmer固件加载，并集成编程接口、日志记录及安全机制，可显著… · 2026/9/26 20:15:57
fp_growth 鸿蒙化适配实践：Flutter 端侧频繁项集挖掘与购物篮分析 最近在给公司的一个跨端项目做鸿蒙化，其中一个业务模块刚好踩到了频繁项集挖掘的需求——说白了，就是用户在 App 里的商品点击/加购行为，能不能在端上直接算出“买了 A 的人还会买 B”这样的规则。调研了一圈现成方案，最后锁定 fl… · 2026/9/26 20:15:50
Substrate区块链开发实战：从核心架构到自定义Pallet与无分叉升级 1. 从零认识 Substrate：它到底是什么，能解决什么问题第一次听到 Substrate 这个词，很多人会以为是某个前端框架或者构建工具，其实它是一套用于构建区块链的底层开发框架。简单来说，Substrate 让你不用从零写一条链的底… · 2026/9/26 20:15:44
数据库课后习题答案别硬背：当测试用例集刷，效率翻倍 简介：万常选版《数据库原理与设计》课后习题答案资源，覆盖第2至6章及第9章，适合正在学习关系模型、数据库建模、关系数据理论与模式求精的本科生、自学者作为复习与自测材料。压缩包共7个文件，含3个doc参考答案、2个sql示例脚本、… · 2026/9/26 0:00:21
OpenClaw 替代品？Hermes Agent 踩坑实录：macOS 飞书接入 TaoToken 配置 /* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/26 0:00:40
向下兼容与向上兼容：接口设计中的兼容性策略与工程实践 一次版本升级事故，是很多团队绕不过去的坎。线上环境里，服务端明明已经上线了新版接口，老的移动端还在照着旧文档传参数。请求一到网关，校验直接拒绝，用户操作失败，客服群炸了锅，开发群里开始互… · 2026/9/26 0:00:46
