Harmonyos5应用开发实战——个人主页页面构建（part1）

文章概要

本文聚焦于HarmonyOS Next平台上个人主页页面的开发实践。详细介绍了个人主页页面的整体布局，包括顶部导航、用户信息展示、功能列表以及会员中心提示等部分的实现，同时阐述了页面跳转功能的实现方式，为开发者在HarmonyOS Next环境下构建类似的个人主页页面提供了详细的参考。

核心功能及代码实现

1. 页面布局与导航设置

页面采用了 NavDestination 进行导航设置，整体布局使用 Stack 和 Column 组件。顶部通过 RelativeContainer 包含返回按钮和页面标题，点击返回按钮可实现页面返回操作。代码如下：

build() {
  NavDestination() {
    Stack() {
      Column() {
        RelativeContainer() {
          Row() {
            Image($r('app.media.back_white'))
              .width('16lpx')
              .height('16lpx')
              .onClick(() => {
                this.pageRouter.pop()
              })
            Text('主页')
              .fontColor('#FFFFFF')
              .fontSize(14)
              .lineHeight(20)
              .width('28lpx')
              .margin({ left: '2lpx', bottom: '2lpx' })
          }
          // ... 其他布局代码
        }
        // ... 其他布局代码
      }
      // ... 其他布局代码
    }
  }
  .backgroundColor('#0A59F7')
  .hideTitleBar(true)
  .padding({top:40,bottom:20})
}

2. 用户信息展示

在顶部的 RelativeContainer 中展示用户的头像、问候语以及登录提示信息。代码如下：

Row() {
  Image($r('app.media.avatar'))
}
.justifyContent(FlexAlign.Center)
.width('48lpx')
.height('48lpx')
.alignRules({
  top: { anchor: "__container__", align: VerticalAlign.Top },
  left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.margin({ top: '44lpx', left: '24lpx' })
.id("row1")

Row() {
  Text('Hi~')
  // ... 文本样式设置
}
.justifyContent(FlexAlign.Center)
.alignRules({
  top: { anchor: "__container__", align: VerticalAlign.Top },
  left: { anchor: "row1", align: HorizontalAlign.End }
})
.margin({ top: '44lpx', left: '16lpx' })
.id("row2")

Row() {
  Text('点击头像登录')
  // ... 文本样式设置
}
.justifyContent(FlexAlign.Center)
.alignRules({
  top: { anchor: "row2", align: VerticalAlign.Bottom },
  left: { anchor: "row1", align: HorizontalAlign.End }
})
.margin({ top: '8lpx', left: '16lpx' })
.id("row3")