HarmonyOS Next 教育应用之个人中心页面开发（一）

HarmonyOS Next 教育应用之个人中心页面开发

概述

在 HarmonyOS Next 教育类应用开发中，个人中心页面是用户与应用进行交互的重要界面，它能展示用户相关信息并提供快捷操作入口。下面将介绍如何构建一个个人中心页面。

核心代码功能及对应代码段

1. 页面组件与状态定义

使用 @Component 装饰器定义 MinePage 组件，同时使用 @State 装饰器管理页面状态，如消息、登录状态、图片资源等。

@Component
export struct MinePage {
  @State message: string = 'Hello World';
  @State isLogin: boolean = true
  scroller: Scroller = new Scroller()
  @State uri: Resource | string | undefined = undefined;
  context: Context = getContext(this) as Context;
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack
}

2. 列表项构建

MineCourseListItem 构建器函数用于构建列表中的每个项目，包含图标、文字描述和右侧箭头，点击列表项可跳转到指定页面。

@Builder
MineCourseListItem(model: MineListModel) {
  Flex({
    direction: FlexDirection.Row,
    justifyContent: FlexAlign.SpaceBetween,
    alignItems: ItemAlign.Center
  }) {
    Row() {
      Image(model.icon)
        .objectFit(ImageFit.Fill)
        .height($r('app.float.list_icon_height'))
        .width($r('app.float.list_icon_height'))
        .fillColor(model.bgColor)
      Text(model.text).fontSize(16).fontColor('333333').margin({ left: $r('app.float.list_left_margin') })
    }.alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Start)

    Image($r('app.media.ic_right_arrow'))
      .objectFit(ImageFit.Contain)
      .fillColor('#aaaaaa')
      .height($r('app.float.list_icon_more_height'))
      .width($r('app.float.list_icon_more_height'))
      .margin({ right: $r('app.float.list_left_margin') })
  }
  .height($r('app.float.icon_person_size'))
  .margin({ left: $r('app.float.list_left_margin'), right: $r('app.float.list_left_margin') })
  .width(StyleConstants.FULL_WIDTH).onClick(() => {
    let pathName = model.pathName;
    this.pathStack.pushPathByName(pathName, null);
  })
}