HarmonyOS Next 教育类应用开发技术剖析（二）

3. 考试详情展示功能
   • 功能：展示考试的详细信息，如试卷总分、及格分数、考试时长、题目数量、考试时间、考试说明等，并支持点击开始考试。
   • 代码段：

@Entry
@Component
export struct ExaminationDetailPage {
  @State message: string = 'Hello World';
  @State GridList: GridItemType[] = []
  @State count: number = (ExaminationDetailObj.examNum as number) - (ExaminationDetailObj.useExamNum as number)
  pathStack: NavPathStack = AppStorage.get('pathStack') as NavPathStack;

  build() {
    NavDestination() {
      Column() {
        Stack({
          alignContent: Alignment.TopStart
        }) {
          Image($r('app.media.ic_app_background'))
            .width('100%')
          Column() {
            // 显示标题
            Text('理论测试复习')
              .fontColor(Color.White)
              .fontWeight(FontWeight.Bold)
              .fontSize(20)
              .margin({
                top: 40,
                bottom: 40
              })
            // 显示考试信息网格
            Grid() {
              ForEach(this.GridList, (item: GridItemType, index: number) => {
                GridItem() {
                  Row() {
                    Image(item.img)
                      .width(24)
                      .height(24)
                      .margin({
                        right: 10
                      })
                    Column() {
                      Text(item.name)
                        .fontColor($r('app.color.gray_color'))
                      Text(`${item.value}`)
                        .fontWeight(FontWeight.Bold)
                        .margin({
                          top: 5
                        })
                    }
                  }
                }
                .height(60)
                .width('100%')
                .border({
                  width: { bottom: index == 0 || index == 1 ? 1 : 0, right: index == 0 || index == 2 ? 1 : 0 },
                  color: { bottom: '#eeeeee', right: '#eeeeee' },
                  style: {
                    bottom: BorderStyle.Solid
                  }
                })
              }, (item: GridItemType) => JSON.stringify(item))
            }
            .width('92%')
            .height(160)
            .padding(20)
            .backgroundColor(Color.White)
            .borderRadius(20)
            .columnsTemplate('1fr 1fr ')
            .rowsTemplate('1fr 1fr')

            // 显示考试次数和最高分信息
            Row() {
              Image($r('app.media.course'))
                .width(16)
                .height(16)
                .margin({
                  right: 8
                })
              Text(`本期考试已考${ExaminationDetailObj.useExamNum}次，还剩${this.count}次机会，最高分${ExaminationDetailObj.highScore}分`)
                .fontSize(12)
                .fontSize(12)
            }
            .backgroundColor('#fdf6ec')
            .borderRadius(10)
            .padding({
              top: 8,
              bottom: 8,
              left: 10,
              right: 10
            })
            .width('92%')
            .margin({
              top: 20,
              bottom: 20
            })

            // 显示考试时间和考试说明
            Column() {
              Column() {
                Row() {
                  Text()
                    .width(4)
                    .height(14)
                    .backgroundColor('#ffab01')
                    .margin({
                      right: 6
                    })
                  Text('考试时间')
                    .fontColor($r('app.color.gray_color'))
                    .fontSize(14)
                }
                .width(TrainConstants.FULL_WIDTH)

                Text(`${ExaminationDetailObj.startTime}-${ExaminationDetailObj.endTime}`)
                  .fontSize(14)
                  .width(TrainConstants.FULL_WIDTH)
                  .margin({
                    top: 8, bottom: 15
                  })
              }

              Column() {
                Row() {
                  Text()
                    .width(4)
                    .height(14)
                    .backgroundColor('#ffab01')
                    .margin({
                      right: 6
                    })
                  Text('考试说明')
                    .fontColor($r('app.color.gray_color'))
                    .fontSize(14)
                }
                .width(TrainConstants.FULL_WIDTH)

                Text(`${ExaminationDetailObj.content}`)
                  .fontSize(14)
                  .width(TrainConstants.FULL_WIDTH)
                  .margin({
                    top: 8, bottom: 15
                  })
              }
            }
            .width('92%')

            // 开始考试按钮
            Button('开始考试')
              .width('92%')
              .fontColor(Color.White)
              .fontSize(14)
              .linearGradient({
                direction: GradientDirection.Right,
                angle: 90,
                colors: [
                  ['#ffab01', 0.0],
                  ['#fdc700', 0.5],
                  ['#fefb41', 1.0],
                ]
              })
              .margin({
                top: 30
              })
              .onClick(() => {
                this.pathStack.pushPathByName('MineStartTestPage', null);
              })
          }
          .width(TrainConstants.FULL_WIDTH)
          .height(TrainConstants.FULL_HEIGHT)
        }
        .width(TrainConstants.FULL_WIDTH)
        .height(TrainConstants.FULL_HEIGHT)
      }
      .width(TrainConstants.FULL_WIDTH)
      .height(TrainConstants.FULL_HEIGHT)
      .backgroundColor(Color.White)
    }
    .title('考试详情')
    .margin({top:30})
    .onReady((ctx: NavDestinationContext) => {
      // 初始化考试信息网格
      for (const key of Object.keys(ExaminationDetailObj)) {
        if (key == 'totalScore') {
          let obj: GridItemType = {
            img: $r('app.media.course'),
            name: ExaminationDetailInfoEnum[key],
            value: `${Reflect.get(ExaminationDetailObj, key)}分`,
            code: key
          }
          this.GridList.push(obj)
        } else if (key == 'score') {
          // ... 其他信息处理
        }
      }
    })
  }
}

总结

通过以上核心代码的实现，我们可以看到在 HarmonyOS Next 中开发教育类应用具有良好的开发体验。利用 HarmonyOS 提供的丰富组件和 API，能够方便地实现视频播放、课程展示、考试详情展示等功能，为用户提供一个完整的教育学习环境。同时，代码的结构清晰，易于维护和扩展，有助于开发者快速构建出高质量的教育类应用。