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++;
}
})
用户点击提示后，要记录一下提示次数。可以做一定的评价处理。这个评价规则则可以由开发者自定义了。
至此，完成了提示功能。