页面预览

个人中心页面布局图

前言

个人中心 是用户管理个人信息和进入各功能模块的入口，通常包含用户头像、统计数据、菜单列表。小分享 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.ets MenuItem 接口定义
components/BottomTabBar.ets 底部导航组件

7. 本文涉及的所有 API

API/组件 用途 文档链接
@Builder UI 复用 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 设置页的实现。

相关资源

10. 完整代码文件索引

文件路径 说明
pages/ProfilePage.ets 个人中心页面
common/interfaces.ets MenuItem 接口定义
components/BottomTabBar.ets 底部导航组件

11. 本文涉及的所有 API

API/组件 用途 文档链接
@Builder UI 复用 Builder Guide
Divider 分割线 Divider
router.pushUrl() 路由跳转 Router
Scroll 可滚动容器 Scroll
ForEach 循环渲染 ForEach
BottomTabBar 底部导航 自定义组件
Row 行容器 Row
Column 列容器 Column
Text 文本组件 Text
borderRadius 圆角 BorderRadius

12. 实现要点总结

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

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

13. 总结

本文详细讲解了 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)

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

# 后端
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

HarmonyOS 6.1 跨端开发进阶：ArkUI-X从“一次开发”到“多端部署”的实战

Web容器（Cordova/WebView）：体验差，性能低，只是网页套壳。自绘引擎（React Native/Flutter）：性能好，但生态割裂，调试困难，包体积大。ArkUI-X（鸿蒙原生跨端）：基于鸿蒙原生渲染引擎，共享核心代码，保留平台特性，是真正的“一次开发，多端部署”。核心价值代码复用率90%+：业务逻辑、UI布局、状态管理完全复用。原生性能：不使用WebView，直接调用Skia渲

avatar HarmonyOS开发者社区
cover

鸿蒙 PC Markdown 编辑器内核隔离：CodeMirror EditorState 多会话切换

avatar HarmonyOS开发者社区
cover

鸿蒙 PC Markdown 编辑器 Bridge 协议：原生外壳与 Web 内核的状态同步

avatar HarmonyOS开发者社区