鸿蒙开发之相对布局、倒计时TextTimer示例代码_交换机

一、relativecontainers

通过子组件之间的相对关系或子组件与父组件（__container__）的相对关系来布局，需结合 alignrules 方法和 id 属性实现。

基础用法步骤

给子组件设置唯一 id：用于作为其他组件的 “锚点”。
通过 alignrules 定义对齐规则：每个规则包含 anchor（锚点组件的 id，或容器 __container__）和 align（对齐方式）。

对齐规则的属性与取值

alignrules 支持以下属性（用于定义组件在垂直方向和水平方向的对齐逻辑）：

方向	属性名	对齐方式取值（verticalalign/horizontalalign）	说明
垂直方向	`top`	`top`/`center`/`bottom`	组件的顶部、垂直中心、底部与锚点的对应位置对齐
垂直方向	`center`	`top`/`center`/`bottom`	同上（`center` 是垂直方向的 “中心对齐” 属性，命名容易混淆，需注意）
水平方向	`left`	`start`/`center`/`end`	组件的左边缘、水平中心、右边缘与锚点的对应位置对齐（`start` 对应左，`end` 对应右）
水平方向	`middle`	`start`/`center`/`end`	同上（`middle` 是水平方向的 “中心对齐” 属性）

使用

//组件居中显示
 
relativecontainer() {
  text("居中组件")
    .width(100)
    .height(100)
    .alignrules({
      center: {anchor: "__container__", align: verticalalign.center}, // 垂直居中
      middle: {anchor: "__container__", align: horizontalalign.center} // 水平居中
    })
}

//组件相对排列
 
relativecontainer() {
  text("组件a")
    .width(100)
    .height(100)
    .backgroundcolor(color.red)
    .id("a")
  text("组件b")
    .width(100)
    .height(100)
    .backgroundcolor(color.blue)
    .alignrules({
      top: {anchor: "a", align: verticalalign.bottom}, // 组件b的顶部对齐组件a的底部
      left: {anchor: "a", align: horizontalalign.end}  // 组件b的左边缘对齐组件a的右边缘
    })
}

注意事项

id 必须唯一：同一 relativecontainer 内的所有子组件 id 不能重复。
避免循环依赖：如果组件 a 的锚点是组件 b，组件 b 的锚点又是组件 a，会导致布局计算失败。

二、倒计时texttimer

通过文本显示计时信息并控制其计时器状态的组件。

名称	类型	只读	可选	说明
iscountdown	boolean	否	是	倒计时开关。值为true时，计时器开启倒计时，例如从30秒 ~ 0秒。值为false时，计时器开始计时，例如从0秒 ~ 30秒。默认值：false
count	number	否	是	计时器时间（iscountdown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为计时器初始值。否则，使用默认值为计时器初始值。默认值：60000
controller	texttimercontroller	否	是	texttimer控制器。

名称

类型

只读

可选

说明

iscountdown

boolean

否

是

倒计时开关。值为true时，计时器开启倒计时，例如从30秒 ~ 0秒。值为false时，计时器开始计时，例如从0秒 ~ 30秒。

默认值：false

count

number

否

是

计时器时间（iscountdown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为计时器初始值。否则，使用默认值为计时器初始值。

默认值：60000

controller

texttimercontroller

否

是

texttimer控制器。

format属性

设置自定义格式，需要至少包含一个hh、mm、ss、ss

参数名	类型	必填	说明
value	string	是	自定义格式。默认值：'hh:mm:ss.ss'

参数名

类型

必填

说明

value

string

是

自定义格式。

默认值：'hh:mm:ss.ss'

ontimer事件

ontimer(event: (utc: number, elapsedtime: number) => void)

时间文本发生变化时触发该事件。锁屏状态和应用后台状态下不会触发该事件。

参数名	类型	必填	说明
utc	number	是	linux时间戳，即自1970年1月1日起经过的时间，单位为设置格式的最小单位。
elapsedtime	number	是	计时器经过的时间，单位为设置格式的最小单位。

texttimercontroller

texttimer组件的控制器，用于控制文本计时器。一个texttimer组件仅支持绑定一个控制器，组件创建完成后相关指令才能被调用。

导入对象

texttimercontroller: texttimercontroller = new texttimercontroller();

start（）：计时开始
pause（）：计时暂停
reset（）：重置计时器

使用

@entry
@component
struct time {
  texttimercontroller: texttimercontroller = new texttimercontroller();
 
  onpageshow(): void {
    this.texttimercontroller.start()
 
  }
 
  @state countdown: boolean = true
 
  build() {
    column() {
      texttimer({ count: 5000, controller: this.texttimercontroller, iscountdown: this.countdown })
        .format('ss')
        .fontsize(25)
        .ontimer(
          (utc: number, passtime) => {
            if (passtime == 5) {
              this.getuicontext().getrouter().pushurl({ url: "pages/relativecontainer" })
            }
          }
        )
    }.width('100%')
  }
}