本文旨在纪录自己对TextTimer使用过程的疑惑问题
我在查看教程时候,发现很多博客在onTimer(event: (utc: number, elapsedTime: number) => void) 这里提到elapsedTime:计时器经过的时间,单位为毫秒。我不清楚是否为版本问题。
在我查看version11和version10的api时候,说的都是设置格式的最小单位。
经过个人检验的情况是:version11和version10都是依据格式(format)的最小单位设置的。
例如:
@Entry
@Component
struct TextTimerExample {
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'mm:ss.SS'
build() {
Column() {
TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController })
.format(this.format)
.fontColor(Color.Black)
.fontSize(50)
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
})
Row() {
Button("start").onClick(() => {
this.textTimerController.start()
})
Button("pause").onClick(() => {
this.textTimerController.pause()
})
Button("reset").onClick(() => {
this.textTimerController.reset()
})
}
}
}
}
这里显然·应该是5300毫秒,但是显示530,如果考虑到format中最小为SS,也就是10ms,那么就说得通了
同理:
import router from '@ohos.router'
@Entry
@Component
struct TextTimerPage {
@State message: string = '通过文本显示计时信息并控制其计时器状态的组件。'
@State onTimerContent: string = ''
// TextTimer的控制器
private controller: TextTimerController = new TextTimerController()
build() {
Row() {
Scroll() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width('96%')
Blank(12)
TextTimer({ isCountDown: true, count: 120000, controller: this.controller })
.fontSize(20)
.fontColor(Color.Red)
.format('mm:ss')
.onTimer((utc: number, elapsedTime: number) => { // utc 时间戳, elapsedTime计时器经过的时间
this.onTimerContent = 'textTimer 时间戳 utc is:' + utc + ', 计时器经过的时间 elapsedTime: ' + elapsedTime;
})
Blank(12)
Row() {
Button('计时器启动').width('30%').onClick(() => {
this.controller.start();
})
Button('计时器暂停').width('30%').margin({ left: '2.5%', right: '2.5%' }).onClick(() => {
this.controller.pause();
})
Button('计时器重置').width('30%').onClick(() => {
this.controller.reset();
})
}
.alignItems(VerticalAlign.Center)
Blank(12)
Text(this.onTimerContent).width('96%').fontSize(20).fontColor(Color.Red)
Blank(12)
Button("文本文档")
.fontSize(20)
.backgroundColor('#007DFF')
.width('96%')
.onClick(() => {
// 处理点击事件逻辑
router.pushUrl({
url: "pages/baseComponent/textTimer/TextTimerDesc",
})
})
}
.width('100%')
}
}
.padding({ top: 12, bottom: 12 })
}
}
这里应该是5s,也就是5000ms,如果考虑format中的最小单位为s,也说得通
再次考虑这个情况:
// xxx.ets
@Entry
@Component
struct TextTimerExample {
textTimerController: TextTimerController = new TextTimerController()
build() {
Column() {
TextTimer({controller: this.textTimerController})
.format('mm:ss:SSS')
.fontColor(Color.Black)
.fontSize(50)
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
})
Row() {
Button("start").onClick(() => {
this.textTimerController.start();
});
Button("pause").onClick(() => {
this.textTimerController.pause();
});
Button("reset").onClick(() => {
this.textTimerController.reset();
});
}
}
}
}
此时就是以毫秒做单位了
但是又出现一个情况:
我师兄在使用version11时候,即使format是SS结尾,也可以到毫秒,这就不清楚什么原因了。
总之,本文只做自己学习中遇到的疑惑纪录。