1# TextTimer 2 3通过文本显示计时信息并控制其计时器状态的组件。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15TextTimer(options?: TextTimerOptions) 16 17**参数：** 18 19| 参数名 | 参数类型 | 必填 | 参数描述 | 20| -------- | -------- | -------- | -------- | 21| options | [TextTimerOptions](#texttimeroptions对象说明)| 否 | 通过文本显示计时信息并控制其计时器状态的组件参数。 | 22 23## TextTimerOptions对象说明 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| ----------- | -------- | -------- | -------- | 27| isCountDown | boolean | 否 | 是否倒计时。<br/>默认值：false | 28| count | number | 否 | 倒计时时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为倒计时初始值。否则，使用默认值为倒计时初始值。<br/>默认值：60000 | 29| controller | [TextTimerController](#texttimercontroller) | 否 | TextTimer控制器。 | 30 31## 属性 32 33除支持[通用属性](ts-universal-attributes-size.md)和[文本通用属性](ts-universal-attributes-text-style.md)的fontColor、fontSize、fontStyle、fontWeight、fontFamily外，还支持以下属性： 34 35| 名称 | 参数类型 | 描述 | 36| -------- | ---------------------- | ---------------------- | 37| format | string | 自定义格式，需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式，则使用默认值。<br/>默认值：'HH:mm:ss.SS' | 38| textShadow<sup>11+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明) \| Array<[ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions对象说明)> | 设置文字阴影效果。该接口支持以数组形式入参，实现多重文字阴影。<br/>**说明：**<br/>不支持fill字段, 不支持智能取色模式。 | 39 40## 事件 41 42| 名称 | 功能描述 | 43| ---------------------------------------- | ---------------------------------------- | 44| onTimer(event: (utc: number, elapsedTime: number) => void) | 时间文本发生变化时触发。<br/>utc：Linux时间戳，即自1970年1月1日起经过的时间，单位为设置格式的最小单位。<br/>elapsedTime：计时器经过的时间，单位为设置格式的最小单位。 <br/> **说明：** <br/>锁屏状态和应用后台状态下不会触发该事件。| 45 46## TextTimerController 47 48TextTimer组件的控制器，用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。 49 50### 导入对象 51 52``` 53textTimerController: TextTimerController = new TextTimerController() 54 55``` 56 57### start 58 59start() 60 61计时开始。 62 63### pause 64 65pause() 66 67计时暂停。 68 69### reset 70 71reset() 72 73重置计时器。 74 75## 示例 76### 示例1 77```ts 78// xxx.ets 79@Entry 80@Component 81struct TextTimerExample { 82 textTimerController: TextTimerController = new TextTimerController() 83 @State format: string = 'mm:ss.SS' 84 85 build() { 86 Column() { 87 TextTimer({ isCountDown: true, count: 30000, controller: this.textTimerController }) 88 .format(this.format) 89 .fontColor(Color.Black) 90 .fontSize(50) 91 .onTimer((utc: number, elapsedTime: number) => { 92 console.info('textTimer notCountDown utc is：' + utc + ', elapsedTime: ' + elapsedTime) 93 }) 94 Row() { 95 Button("start").onClick(() => { 96 this.textTimerController.start() 97 }) 98 Button("pause").onClick(() => { 99 this.textTimerController.pause() 100 }) 101 Button("reset").onClick(() => { 102 this.textTimerController.reset() 103 }) 104 } 105 } 106 } 107} 108``` 109 110 111 112 113### 示例2 114``` ts 115@Entry 116@Component 117struct TextTimerExample { 118 @State textShadows : ShadowOptions | Array<ShadowOptions> = [{ radius: 10, color: Color.Red, offsetX: 10, offsetY: 0 },{ radius: 10, color: Color.Black, offsetX: 20, offsetY: 0 }, 119 { radius: 10, color: Color.Brown, offsetX: 30, offsetY: 0 },{ radius: 10, color: Color.Green, offsetX: 40, offsetY: 0 }, 120 { radius: 10, color: Color.Yellow, offsetX: 100, offsetY: 0 }] 121 build() { 122 Column({ space: 8 }) { 123 TextTimer().fontSize(50).textShadow(this.textShadows) 124 } 125 } 126} 127``` 128
