鸿蒙开发之相对布局、倒计时TextTimer示例代码实用指南

作者：袖梨 2026-09-01

平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“鸿蒙开发之相对布局、倒计时TextTimer示例代码”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

目录
  • 一、RelativeContainers
  • 二、倒计时TextTimer
  • 总结

一、RelativeContainers

在这个场景下，借助子组件之间的相对关系或子组件与父组件（__container__）的相对关系来布局，需结合 alignRules 方法和 id 属性实现。

基础用法步骤

  1. 给子组件设置唯一 id：用来作为其他组件的 “锚点”。
  2. 借助 alignRules 定义对齐规则：每个规则包含 anchor（锚点组件的 id，或容器 __container__）和 align（对齐方式）。

对齐规则的属性与取值

alignRules 兼容以下属性（用来定义组件在垂直方向和水平方向的对齐逻辑）：

方向属性名对齐方式取值（VerticalAlign/HorizontalAlign）说明
垂直方向topTop/Center/Bottom组件的顶部、垂直中心、底部与锚点的对应位置对齐
垂直方向centerTop/Center/Bottom同上（center 是垂直方向的 “中心对齐” 属性，命名容易混淆，需注意）
水平方向leftStart/Center/End从实现思路看，组件的左边缘、水平中心、右边缘与锚点的对应位置对齐（Start 对应左，End 对应右）
水平方向middleStart/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的右边缘
    })
}

注意事项

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

二、倒计时TextTimer

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

名称类型只读可选说明
isCountDownboolean否是

结合项目来看，倒计时开关。值为true时，计时器开启倒计时，比如从30秒 ~ 0秒。值为false时，计时器开始计时，比如从0秒 ~ 30秒。

默认值：false

countnumber否是

理解这一步时，计时器时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为计时器初始值。否则，采用默认值为计时器初始值。

默认值：60000

controller

TextTimerController

否是TextTimer控制器。

format属性

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

参数名类型必填说明
valuestring是

自定义格式。

默认值：'HH:mm:ss.SS'

ontimer事件

onTimer(event: (utc: number, elapsedTime: number) => void)

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

参数名类型必填说明
utcnumber是结合项目来看，Linux时间戳，即自1970年1月1日起经过的时间，单位为设置格式的最小单位。
elapsedTimenumber是计时器经过的时间，单位为设置格式的最小单位。

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%')
  }
}

总结

到此这篇关于鸿蒙开发之相对布局、倒计时TextTimer的文章就介绍到这了,更多相关鸿蒙相对布局、倒计时TextTimer内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！

您可能感兴趣的文章:
  • 深入浅析华为鸿蒙IDE安装与Hello World
  • 鸿蒙系统中的 JS 开发框架
  • 鸿蒙OS如何开发一个前端应用详解

相关文章

精彩推荐