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: Array<MenuItem> = [ { 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 个人中心核心要点

  1. 圆形头像用 borderRadius(32) 实现
  2. @Builder 封装统计项
  3. 菜单列表包含图标、标签、箭头

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: 4

2. 圆形头像的完整实现

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. 本文涉及的所有 API

API/组件用途文档链接
@BuilderUI 复用Builder Guide
Divider分割线Divider
router.pushUrl()路由跳转Router
Scroll可滚动容器Scroll
ForEach循环渲染ForEach
BottomTabBar底部导航自定义组件

8. 实现要点总结

个人中心的核心实现要点：

  1. 圆形头像：width=height=64,borderRadius=32实现正圆
  2. 三栏统计：@Builder StatItem封装，layoutWeight(1)均分
  3. 菜单列表：ForEach循环渲染 +Divider分割线
  4. 路由跳转：item.page为空时不跳转

9. 总结

本文详细讲解了 ProfilePage 个人中心的完整实现，涵盖圆形头像、三栏统计、菜单列表等核心功能。下一篇我们将深入 SettingsPage 设置页的实现。

相关资源

  • HarmonyOS @Builder 装饰器：@Builder Guide
  • HarmonyOS Divider 组件：Divider Reference
  • HarmonyOS Router 路由：Router API
  • HarmonyOS Scroll 组件：Scroll Component
  • HarmonyOS ForEach 渲染：ForEach Reference
  • HarmonyOS Row 组件：Row Component
  • HarmonyOS 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)

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！