HarmonyOS Next 教育应用之设置页面开发（一）

HarmonyOS Next 教育应用之设置页面开发

概述

在 HarmonyOS Next 教育类应用开发中，设置页面是为用户提供系统设置、清理缓存、退出登录等功能的重要界面。下面将介绍如何构建一个设置页面。

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

1. 页面组件与状态定义

使用 @Entry 和 @Component 装饰器定义页面组件，同时初始化导航栈和对话框控制器。

@Entry
@Component
export struct MineSetPage {
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack;
  dialog: CustomDialogController = new CustomDialogController({
    builder: LogoutDialog({
      cancel: this.onCancel,
      confirm: this.onConfirm
    }),
    autoCancel: true,
    gridCount: 4,
    customStyle: false
  })
  cacheDialog: CustomDialogController = new CustomDialogController({
    builder: LogoutDialog({
      cancel: this.onCancel,
      confirm: this.clearCache,
      message: '是否清除缓存?'
    }),
    autoCancel: true,
    gridCount: 4,
    customStyle: false
  })
}

2. 列表项构建

MineListItem 构建器函数用于构建列表中的每个项目，包含文字描述和右侧箭头，点击列表项可执行不同操作，如打开退出登录对话框、清除缓存对话框或跳转到指定页面。

@Builder
MineListItem(model: MineSetListModel) {
  Flex({
    direction: FlexDirection.Row,
    justifyContent: FlexAlign.SpaceBetween,
    alignItems: ItemAlign.Center
  }) {
    Text(model.text).fontSize(16).fontColor('333333').margin({ left: $r('app.float.list_left_margin') })
    Image($r('app.media.ic_right_arrow'))
      .objectFit(ImageFit.Contain)
      .height($r('app.float.list_icon_height'))
      .width($r('app.float.list_icon_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 router_url = model.url
    if (router_url == '/logout') {
      this.dialog.open()
    } else if (router_url == '/clear') {
      this.cacheDialog.open()
    } else {
      this.pathStack.pushPathByName(model.url, null);
    }
  })
}