提交 8f98aa7c 编写于 作者: L liukaii

修改text_clock和texttimer组件的API参考文档。

Signed-off-by: Nliukaii <liukai240@huawei.com>
上级 824a215d
...@@ -3,12 +3,9 @@ ...@@ -3,12 +3,9 @@
TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。 TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示,最高精度到秒级。
>**说明:** >**说明:**
>
>该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 >该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件 ## 子组件
...@@ -19,18 +16,18 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController ...@@ -19,18 +16,18 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
**参数:** **参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ | | -------------- | -------- | ------ | --------------------------------------------------------------------------- |
| timeZoneOffset | number | 否 | 当前系统的时区偏移量 | 设置时区偏移量。<br>取值范围为[-14, 12],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8。<br>对横跨国际日界线的国家或地区,用-13(UTC+13)和-14(UTC+14)来保证整个国家或者区域处在相同的时间,当设置的值不在取值范围内时,将使用当前系统的时区偏移量。 | | timeZoneOffset | number | 否 | 设置时区偏移量。<br>取值范围为[-14, 12],表示东十二区到西十二区,其中负值表示东时区,正值表示西时区,比如东八区为-8。<br>对横跨国际日界线的国家或地区,用-13(UTC+13)和-14(UTC+14)来保证整个国家或者区域处在相同的时间,当设置的值不在取值范围内时,将使用当前系统的时区偏移量。<br/>默认值:当前系统的时区偏移量 |
| controller | [TextClockController](#textclockcontroller) | 否 | null | 绑定一个控制器,用来控制文本时钟的状态。| | controller | [TextClockController](#textclockcontroller) | 否 | 绑定一个控制器,用来控制文本时钟的状态。|
## 属性 ## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 默认值 | 描述 | | 名称 | 参数类型 | 描述 |
| ------ | -------- | -------- | ------------------------------------------------------------ | | ------ | --------------- | ------------------------------------------------------------ |
| format | string | 'hms' | 设置显示时间格式。<br/>日期间隔符固定为"/",时间间隔符为":"。<br/>如yyyyMMdd,yyyy-MM-dd显示为yyyy/MM/dd,<br/>hhmmss显示为hh:mm:ss。 <br/>时间格式只用写一位即可,如"hhmmss"等同于"hms"。<br/>支持的时间格式化字符串:<br/>- YYYY/yyyy:完整年份。<br/>- YY/yy:年份后两位。<br/>- M:月份(若想使用01月则使用MM)。<br/>- d:日期(若想使用01日则使用dd)。<br/>- D:年中日(一年中的第几天)。<br/>- H:24小时制。<br/>- h:12小时制。<br/>- m:分钟。<br/>- s:秒。<br/>- SSS:毫秒。| | format | string | 设置显示时间格式。<br/>日期间隔符固定为"/",时间间隔符为":"。<br/>如yyyyMMdd,yyyy-MM-dd显示为yyyy/MM/dd,<br/>hhmmss显示为hh:mm:ss。 <br/>时间格式只用写一位即可,如"hhmmss"等同于"hms"。<br/>支持的时间格式化字符串:<br/>- YYYY/yyyy:完整年份。<br/>- YY/yy:年份后两位。<br/>- M:月份(若想使用01月则使用MM)。<br/>- d:日期(若想使用01日则使用dd)。<br/>- D:年中日(一年中的第几天)。<br/>- H:24小时制。<br/>- h:12小时制。<br/>- m:分钟。<br/>- s:秒。<br/>- SSS:毫秒。若格式未匹配,则使用默认值。<br/>默认值: 'hms'|
## 事件 ## 事件
...@@ -38,16 +35,16 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController ...@@ -38,16 +35,16 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------------------------------------------- | ------------------------------------------------------------ | | -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。<br /> - value: Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。 | | onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。<br/>- value: Unix Time Stamp,即自1970年1月1日(UTC)起经过的毫秒数。 |
## TextClockController ## TextClockController
TextClock容器组件的控制器,可以将此对象绑定到TextClock组件,再通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。 TextClock容器组件的控制器,可以将该控制器绑定到TextClock组件,通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。
### 导入对象 ### 导入对象
```ts ```ts
controller: TextClockController = new TextClockController() controller: TextClockController = new TextClockController();
``` ```
### start ### start
...@@ -62,16 +59,15 @@ stop() ...@@ -62,16 +59,15 @@ stop()
停止文本时钟。 停止文本时钟。
## 示例 ## 示例
```ts ```ts
@Entry @Entry
@Component @Component
struct Second { struct Second {
@State accumulateTime: number = 0 @State accumulateTime: number = 0;
controller: TextClockController = new TextClockController() // 导入对象
controller: TextClockController = new TextClockController();
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime) Text('Current milliseconds is ' + this.accumulateTime)
...@@ -80,18 +76,20 @@ struct Second { ...@@ -80,18 +76,20 @@ struct Second {
TextClock({ timeZoneOffset: -8, controller: this.controller }) TextClock({ timeZoneOffset: -8, controller: this.controller })
.format('hms') .format('hms')
.onDateChange((value: number) => { .onDateChange((value: number) => {
this.accumulateTime = value this.accumulateTime = value;
}) })
.margin(20) .margin(20)
.fontSize(30) .fontSize(30)
Button("start TextClock") Button("start TextClock")
.margin({ bottom: 10 }) .margin({ bottom: 10 })
.onClick(() => { .onClick(() => {
this.controller.start() // 启动文本时钟
this.controller.start();
}) })
Button("stop TextClock") Button("stop TextClock")
.onClick(() => { .onClick(() => {
this.controller.stop() // 停止文本时钟
this.controller.stop();
}) })
} }
.width('100%') .width('100%')
...@@ -99,5 +97,4 @@ struct Second { ...@@ -99,5 +97,4 @@ struct Second {
} }
} }
``` ```
![](figures/text_clock.png) ![text_clock](figures/text_clock.gif)
...@@ -3,43 +3,36 @@ ...@@ -3,43 +3,36 @@
通过文本显示计时信息并控制其计时器状态的组件。 通过文本显示计时信息并控制其计时器状态的组件。
> **说明:** > **说明:**
>
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件 ## 子组件
## 接口 ## 接口
TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController }) TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
- 参数 **参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| isCountDown | boolean | 否 | false | 是否倒计时。 |
| count | number | 否 | 60000 | 倒计时时间(isCountDown为true时生效),单位为毫秒。<br/>-&nbsp;count&lt;=0时,使用默认值为倒计时初始值。<br/>-&nbsp;count&gt;0时,count值为倒计时初始值。 |
| controller | [TextTimerController](#texttimercontroller) | 否 | - | TextTimer控制器。 |
## 属性 | 参数名 | 参数类型 | 必填 | 参数描述 |
| ----------- | -------- | -------- | -------- | -------- |
| isCountDown | boolean | 否 | 是否倒计时。<br/>默认值:false |
| count | number | 否 | 倒计时时间(isCountDown为true时生效),单位为毫秒。最长不超过86400000毫秒(24小时)。&nbsp;0&lt;count&lt;86400000时,count值为倒计时初始值。否则,使用默认值为倒计时初始值。<br/>默认值:60000 |
| controller | [TextTimerController](#texttimercontroller) | 否 | TextTimer控制器。 |
| 名称 | 参数类型 | 默认值 | 描述 | ## 属性
| -------- | -------- | -------- | -------- |
| format | string | 'hh:mm:ss.ms' | 自定义格式,需至少包含一个hh、mm、ss、ms中的关键字。 |
| 名称 | 参数类型 | 描述 |
| -------- | ---------------------- | ---------------------- |
| format | string | 自定义格式,需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式,则使用默认值。<br/>默认值:'HH:mm:ss.SS' |
## 事件 ## 事件
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | ---------------------------------------- | ---------------------------------------- |
| onTimer(event:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 时间文本发生变化时触发。<br/>utc:当前显示的时间,单位为毫秒。<br/>elapsedTime:计时器经过的时间,单位为毫秒。 | | onTimer(event:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 时间文本发生变化时触发。<br/>utc:Linux时间戳,即自1970年1月1日起经过的毫秒数。<br/>elapsedTime:计时器经过的时间,单位为毫秒。 |
## TextTimerController ## TextTimerController
...@@ -70,7 +63,6 @@ reset() ...@@ -70,7 +63,6 @@ reset()
重置计时器。 重置计时器。
## 示例 ## 示例
```ts ```ts
...@@ -79,7 +71,7 @@ reset() ...@@ -79,7 +71,7 @@ reset()
@Component @Component
struct TextTimerExample { struct TextTimerExample {
textTimerController: TextTimerController = new TextTimerController() textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'hh:mm:ss.ms' @State format: string = 'HH:mm:ss.SS'
build() { build() {
Column() { Column() {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册