HarmonyOS Next 教育应用之错题集页面开发（一）

HarmonyOS Next 教育应用之错题集页面开发

概述

在 HarmonyOS Next 教育类应用开发中，开发一个错题集页面，能帮助用户集中管理和查看错题信息。下面将介绍如何构建这样一个错题集页面。

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

1. 组件状态与导航栈管理
   • 功能：定义组件状态变量 message，并获取导航路径栈 pathStack，用于页面导航操作。
   • 代码段：

@Entry
@Component
export struct MineErrorPage {
  @State message: string = 'Hello World';
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack;
}

2. 错题列表项构建
   • 功能：构建错题列表中的每一项，包含题目类型、题目内容、选项、正确答案、用户答案和解析等信息。
   • 代码段：

@Builder
testListItem(model: MineErrorModel, index: number) {
  Flex({ direction: FlexDirection.Column }) {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
      Text('判断题')
        .fontWeight(FontWeight.Normal)
        .fontColor('#ffffff')
        .width(80)
        .height(25)
        .borderRadius(5)
        .backgroundColor('#409eff')
        .textAlign(TextAlign.Center)

      Image($r('app.media.delete'))
        .objectFit(ImageFit.Cover)
        .height($r('app.float.list_icon_height'))
        .width($r('app.float.list_icon_height'))
    }.margin({ left: 10, right: 10 })

    Text(model.title)
      .fontWeight(FontWeight.Medium)
      .fontColor('333333').margin({ top: 10, left: 10, right: 10 })

    Flex({ direction: FlexDirection.Column }) {
      ForEach(model.ques, ((item: string) => {
        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
          Text(item)
            .fontColor('#3333333').margin({ left: 5 })

        }.backgroundColor('#eeeeeee').height(50)
        .margin({ top: 8 })
        .borderRadius(5)

      }))
    }.margin({ left: 10, right: 10 })

    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
      Text() {
        Span('正确选项:')
        Span(model.rightQues).fontColor(Color.Red)
      }

      Text() {
        Span('您的选项:')
        Span(model.anwer).fontColor(Color.Red)
      }
    }.margin({ left: 10, right: 10, top: 8 })

    Text('解析:')
      .fontWeight(FontWeight.Normal)
      .fontColor('#666666').margin({ top: 10, left: 10, right: 10 })

  }
}