This content originally appeared on DEV Community and was authored by victordeng
Goal: Implement countdown function
Knowledge points:
TextTimer is a component that displays timing information through text and controls its timer status.
When the component is not visible, time changes will stop, and the visible state of the component is processed based on onVisibleAreaChange. A visible threshold ratio greater than 0 is considered visible.
interface
TextTimer(options?: TextTimerOptions)
options： Component parameters that display timing information through text and control its timer status.
TextTimerOptions
- IsCountDown: Countdown or not. When the value is true, the timer starts counting down, for example, from 30 seconds to 0 seconds. When the value is false, the timer starts counting, for example from 0 seconds to 30 seconds. Default value: false
- Count: Timer time (effective when isCountDown is true), measured in milliseconds. The maximum duration shall not exceed 86400000 milliseconds (24 hours). When 0<count<86400000, the count value is the initial value of the timer. Otherwise, use the default value as the initial timer value. Default value: 60000
- Controller: TextTimer controller.
TextTimerController
The controller of TextTimer component is used to control the text timer. A TextTimer component only supports binding to one controller, and the relevant instructions can only be called after the component is created.
TextTimerConfiguration
- Count: Timer time (effective when isCountDown is true), measured in milliseconds. The maximum duration shall not exceed 86400000 milliseconds (24 hours). When 0<count<86400000, the count value is the initial countdown value. Otherwise, use the default value as the initial countdown value. Default value: 60000.
- IsCountDown: Countdown or not. When the value is true, the timer starts counting down, for example, from 30 seconds to 0 seconds. When the value is false, the timer starts counting, for example from 0 seconds to 30 seconds. Default value: false
- Started: Has the timer started.
- ElapsedTime: The time elapsed by the timer, measured in the smallest formatted unit.
TextTimer property
- Format: Set a custom format that includes at least one keyword from HH, mm, ss, SS. If using date formats such as yy, MM, dd, etc., use the default values.
- TextShadow: Set the text shadow effect. This interface supports entering parameters in array form and implementing multiple text shadows. Do not support fill fields, do not support intelligent color extraction mode.
- ContentModifier: Method for customizing the TextTimer content area. On the TextTimer component, customize the content area method.
Actual combat:CountdownDemoPage
@Entry
@Component
struct CountdownDemoPage {
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'mm:ss.SS'
@State isStart: boolean = false
build() {
Column({ space: 10 }) {
Text('倒计时Demo')
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({ space: 20 }) {
Column({ space: 10 }) {
SymbolGlyph(this.isStart ? $r('sys.symbol.pause') : $r('sys.symbol.play_fill'))
.fontSize(30)
.renderingStrategy(SymbolRenderingStrategy.SINGLE)
.fontColor([Color.Black])
Text(this.isStart ? '暂停' : '开始')
}
.onClick(() => {
if (this.isStart) {
this.textTimerController.pause()
} else {
this.textTimerController.start()
}
this.isStart=!this.isStart
})
Column({ space: 10 }) {
SymbolGlyph($r('sys.symbol.arrow_counterclockwise'))
.fontSize(30)
.renderingStrategy(SymbolRenderingStrategy.SINGLE)
.fontColor([Color.Black])
Text('重置')
}
.onClick(() => {
this.textTimerController.reset()
})
}
}
.width('100%')
}
}
This content originally appeared on DEV Community and was authored by victordeng
victordeng | Sciencx (2025-03-28T07:09:35+00:00) HarmonyOS NEXT Practical: Countdown. Retrieved from https://www.scien.cx/2025/03/28/harmonyos-next-practical-countdown/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.