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 个人中心核心要点
- 圆形头像用 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.ets | MenuItem 接口定义 |
components/BottomTabBar.ets | 底部导航组件 |
7. 本文涉及的所有 API
| API/组件 | 用途 | 文档链接 |
|---|---|---|
@Builder | UI 复用 | Builder Guide |
Divider | 分割线 | Divider |
router.pushUrl() | 路由跳转 | Router |
Scroll | 可滚动容器 | Scroll |
ForEach | 循环渲染 | ForEach |
BottomTabBar | 底部导航 | 自定义组件 |
8. 实现要点总结
个人中心的核心实现要点：
- 圆形头像：
width=height=64,borderRadius=32实现正圆 - 三栏统计：
@Builder StatItem封装，layoutWeight(1)均分 - 菜单列表：
ForEach循环渲染 +Divider分割线 - 路由跳转：
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. 页面功能总结
| 功能模块 | 实现方式 | 核心组件 |
|---|---|---|
| 用户头像 | 圆形 Column | borderRadius(32) |
| 统计数据 | @Builder StatItem | layoutWeight(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)如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！