Harmony OS Next应用“丁斗口算”开发记录(12)

第十二节 自动评分和结果显示

用户点击“交卷”，应用开始评判。即将用户输入的答案，与自动生成的答案进行比较，同时计算正确率。以加减法为例，代码如下： len = this.arrDataAdd.length; for (let i = 0; i < len; i++) { if (this.arrDataAdd[i].Rlt == Number(this.textInput[i])) { this.rltCorrect[i] = true; correctCount++; } else { this.rltCorrect[i] = false; } } correctRate = correctCount / len; correctRate = Math.floor(correctRate * 100); this.Score = correctRate; 分值计算完成后，弹出一个自定义对话框，用于显示给用户看 CustomDialog是自定义弹出框，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹出框。 弹出框（CustomDialog）可以通过配置isModal来实现模态和非模态弹窗。isModal为true的时候，弹出框为模态弹窗。isModal为false时，弹出框为非模态弹窗。 开发对话框的步骤如下： 使用@CustomDialog装饰器装饰自定义弹出框，可在此装饰器内自定义弹出框内容。CustomDialogController需在@Component内定义。 对话框设计如下图，用户得分为100时，显示一个奖励图片，非100分时仅显示分值。对话框底部有两个按钮，得分为100时仅显示“确认”，得分非100时，会多一个“继续做题”按钮。

@CustomDialog export default struct CustomDialogExample { controller: CustomDialogController continue ?: () => void confirm ?: () => void

build(){

  Flex({ justifyContent: FlexAlign.SpaceBetween, direction: FlexDirection.Column }) {        
    if (this.score == 100) {
      Row() {
        Image($r('app.media.d100'))
          .width(220)
          .height(220)
          .objectFit(ImageFit.Contain)
      }.width('100%').justifyContent(FlexAlign.Center)
    } else {
      Text(this.score.toString() + '分')
        .fontSize(32)
        .margin({ top: 20, bottom: 10 })
      Text('继续加油哦')
        .fontSize(32)
        .margin({ top: 10, bottom: 50 })
    }
    Row() {
       Button('继续做题')
        .fontSize(16)
        .borderColor(Color.Black)
        .onClick(() => {
          if (this.continue) {
            this.continue();
          }
          this.controller.close();
        })
        .backgroundColor(0xffffff)
        .fontColor(Color.Black)
        .width(96)
         .visibility(this.score==100?Visibility.Hidden:Visibility.Visible)
      Button('确认')
        .fontSize(16)
        .borderColor(Color.Black)
        .onClick(() => {
          if (this.confirm) {
            this.confirm();
          }
          this.controller.close();
        })
        .backgroundColor(0xffffff)
        .fontColor(Color.Red)
        .width(96)
    }.width('100%').height(46).justifyContent(FlexAlign.SpaceEvenly)
  }
  .padding(5)

}

}

对话框导入PageEquation页面后，在页面中创建构造器，与装饰器呼应相连。 dialogController : CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ continue: this.onContinue.bind(this),
confirm: this.onAccept.bind(this), equationIndex:this.index, equationNumber:this.inputSelect.length, score : this.Score, dispRltCount : this.dispRltCount, reCalCount : this.reCalCount, breakRecord : this.breakRecord, timeCount:this.countTime }), alignment: DialogAlignment.Default,
width:'920px', height:'900px', autoCancel:false }) 显示对话框 this.dialogController.open(); 至此，完成了自动评分和结果显示。