当前位置：首页 > news >正文

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

news 2026/7/24 17:39:14

前言

个人中心是用户管理个人信息和进入各功能模块的入口，通常包含用户头像、统计数据、菜单列表。小分享 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: 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.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 设置页的实现。

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