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

第十三节 倒计时与提示

这个应用已经上架，现在版本为V1.9.5，跟本贴有一些不一样的地方。有兴趣的朋友可以下载体验。希望能在评论区看到您的建议。

用户点击进入题目页后，需要增加一个倒计时，给用户一个准备过程，以提高做题速度。倒计时固定为3秒，思路仍然是一个自定义对话框。关于自定义对话框已在上一节说过了，这里只写倒计时部分。 对话框中增加一个定时器，每0.1秒触发一次回调函数onCountDown。初始时计时值为3，每次回调减0.1，直至0为止。如果用户不需要等待3秒，也可直接点击“开始”，以关闭对话框。

@CustomDialog export default struct countdownDlg { confirm?: () => void controller: CustomDialogController @State CountDown:number = 3; private interval:number = 0;

aboutToAppear(): void { // 倒计时3秒提示 this.interval = setInterval(this.onCountDown,100); this.CountDown = 3; }

onCountDown = () =>{ this.CountDown = this.CountDown - 0.1 if( this.CountDown <= 0 ){ this.CountDown = 0; clearInterval(this.interval) this.controller.close(); if( this.confirm ) { this.confirm() } } }

build() { Flex({ justifyContent: FlexAlign.SpaceBetween, direction:FlexDirection.Column }) { Text('准备好了吗？').fontSize(20).width('100%').textAlign(TextAlign.Center) Text(this.CountDown.toFixed(0)).fontSize(32).width('100%').textAlign(TextAlign.Center).margin({top:5,right:5}) Row() { 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({ top:15,left:10,right:10 }) }

aboutToDisappear(): void { clearInterval(this.interval) }

} 对话框关闭后，直接关联PageEquation页的createEqu函数。 dialogController_countdown : CustomDialogController = new CustomDialogController({ builder: countdownDlg({ confirm: this.createEqu?.bind(this) }), alignment: DialogAlignment.Default, width:300, height:120, autoCancel:false }) 以上完成了开始倒计时。

有时候，用户会需要应用给一下答案的提示。点击“提示”键，则在题目上显示一下正确答案。提示键为图片和文本结合的组件，使用了Row组件容纳一个图片和一个Text。Text切换显示“提示”/“隐藏”，并记录下来哪个题目在提示状态。则自定义的题目组件，即可自动刷新“显示”/“隐藏”。 提示键的代码如下： Button() { Row() { Image(r('app.media.ic_gallery_discover')).width(16).height(16) .padding(1) Text(this.bDispRlt[this.selectedInput] ? r('app.string.hideBTNlabel') : $r('app.string.dispBTNlabel')) .fontSize(14) .fontColor(Color.Black) } .onClick(() => { this.bbtnDispRlt = !this.bbtnDispRlt this.bDispRlt[this.selectedInput] = !this.bDispRlt[this.selectedInput]; if (this.bDispRlt[this.selectedInput] == true) { this.dispRltCount++; } }) 用户点击提示后，要记录一下提示次数。可以做一定的评价处理。这个评价规则则可以由开发者自定义了。 至此，完成了提示功能。