前言个人中心是用户管理个人信息和进入各功能模块的入口通常包含用户头像、统计数据、菜单列表。小分享 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)如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力