ts-basic-components-texttimer.md 2.7 KB
Newer Older
Z
zengyawen 已提交
1 2
# TextTimer

T
explain  
tianyu 已提交
3 4
通过文本显示计时信息并控制其计时器状态的组件。

H
geshi  
HelloCrease 已提交
5
>  **说明:**
Z
zengyawen 已提交
6 7 8 9 10 11 12 13 14 15 16 17 18
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。


## 权限列表




## 子组件




L
luoying_ace_admin 已提交
19
## 接口
Z
zengyawen 已提交
20 21 22 23

TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })

- 参数
T
explain  
tianyu 已提交
24
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
Z
zengyawen 已提交
25
  | -------- | -------- | -------- | -------- | -------- |
T
explain  
tianyu 已提交
26 27
  | isCountDown | boolean | 否 | false | 是否倒计时。 |
  | count | number | 否 | 60000 | 倒计时时间(isCountDown为true时生效),单位为毫秒。<br/>-&nbsp;count&lt;=0时,使用默认值为倒计时初始值。<br/>-&nbsp;count&gt;0时,count值为倒计时初始值。 |
K
kangchongtao 已提交
28
  | controller | [TextTimerController](#texttimercontroller) | 否 | - | TextTimer控制器。 |
Z
zengyawen 已提交
29 30 31

## 属性

T
explain  
tianyu 已提交
32
| 名称 | 参数类型 | 默认值 | 描述 |
Z
zengyawen 已提交
33
| -------- | -------- | -------- | -------- |
T
explain  
tianyu 已提交
34
| format | string | 'hh:mm:ss.ms' | 自定义格式,需至少包含一个hh、mm、ss、ms中的关键字。 |
Z
zengyawen 已提交
35 36 37 38


## 事件

T
explain  
tianyu 已提交
39
| 名称 | 功能描述 |
40
| -------- | -------- |
K
kangchongtao 已提交
41
| onTimer(event:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 时间文本发生变化时触发。<br/>utc:当前显示的时间,单位为毫秒。<br/>elapsedTime:计时器经过的时间,单位为毫秒。 |
Z
zengyawen 已提交
42 43


44 45
## TextTimerController

46
TextTimer组件的控制器,用于控制文本计时器。一个TextTimer组件仅支持绑定一个控制器。
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

### 导入对象

```
textTimerController: TextTimerController = new TextTimerController()

```

### start

start()

计时开始。

### pause

pause()

计时暂停。

### reset

reset()

重置计时器。


Z
zengyawen 已提交
74 75
## 示例

H
geshi  
HelloCrease 已提交
76 77
```ts
// xxx.ets
Z
zengyawen 已提交
78 79 80
@Entry
@Component
struct TextTimerExample {
81
  textTimerController: TextTimerController = new TextTimerController()
Z
zengyawen 已提交
82 83 84 85
  @State format: string = 'hh:mm:ss.ms'

  build() {
    Column() {
86
      TextTimer({controller: this.textTimerController})
Z
zengyawen 已提交
87 88
        .format(this.format)
        .fontColor(Color.Black)
89
        .fontSize(50)
Z
zengyawen 已提交
90 91 92 93 94
        .onTimer((utc: number, elapsedTime: number) => {
          console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
        })
      Row() {
        Button("start").onClick(() => {
95
          this.textTimerController.start();
Z
zengyawen 已提交
96 97
        });
        Button("pause").onClick(() => {
98
          this.textTimerController.pause();
Z
zengyawen 已提交
99 100
        });
        Button("reset").onClick(() => {
101
          this.textTimerController.reset();
Z
zengyawen 已提交
102 103 104 105 106 107 108 109 110
        });
      }
    }
  }
}
```


![zh-cn_image_0000001251007721](figures/zh-cn_image_0000001251007721.gif)