腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

鴻蒙開發(fā)之相對布局、倒計時TextTimer示例代碼

更新時間：2026年01月29日 10:10:19 作者：RAY_0104

這篇文章主要介紹了鴻蒙開發(fā)之相對布局、倒計時TextTimer的相關(guān)資料,TextTimer是一個倒計時組件,可以顯示計時信息并控制計時器狀態(tài),文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

一、RelativeContainers

通過子組件之間的相對關(guān)系或子組件與父組件（__container__）的相對關(guān)系來布局，需結(jié)合 alignRules 方法和 id 屬性實現(xiàn)。

基礎(chǔ)用法步驟

給子組件設(shè)置唯一 id：用于作為其他組件的 “錨點”。
通過 alignRules 定義對齊規(guī)則：每個規(guī)則包含 anchor（錨點組件的 id，或容器 __container__）和 align（對齊方式）。

對齊規(guī)則的屬性與取值

alignRules 支持以下屬性（用于定義組件在垂直方向和水平方向的對齊邏輯）：

方向	屬性名	對齊方式取值（VerticalAlign/HorizontalAlign）	說明
垂直方向	`top`	`Top`/`Center`/`Bottom`	組件的頂部、垂直中心、底部與錨點的對應(yīng)位置對齊
垂直方向	`center`	`Top`/`Center`/`Bottom`	同上（`center` 是垂直方向的 “中心對齊” 屬性，命名容易混淆，需注意）
水平方向	`left`	`Start`/`Center`/`End`	組件的左邊緣、水平中心、右邊緣與錨點的對應(yīng)位置對齊（`Start` 對應(yīng)左，`End` 對應(yīng)右）
水平方向	`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 內(nèi)的所有子組件 id 不能重復(fù)。
避免循環(huán)依賴：如果組件 A 的錨點是組件 B，組件 B 的錨點又是組件 A，會導(dǎo)致布局計算失敗。

二、倒計時TextTimer

通過文本顯示計時信息并控制其計時器狀態(tài)的組件。

名稱	類型	只讀	可選	說明
isCountDown	boolean	否	是	倒計時開關(guān)。值為true時，計時器開啟倒計時，例如從30秒 ~ 0秒。值為false時，計時器開始計時，例如從0秒 ~ 30秒。默認(rèn)值：false
count	number	否	是	計時器時間（isCountDown為true時生效），單位為毫秒。最長不超過86400000毫秒（24小時）。 0<count<86400000時，count值為計時器初始值。否則，使用默認(rèn)值為計時器初始值。默認(rèn)值：60000
controller	TextTimerController	否	是	TextTimer控制器。

名稱

類型

只讀

可選

說明

isCountDown

boolean

否

是

倒計時開關(guān)。值為true時，計時器開啟倒計時，例如從30秒 ~ 0秒。值為false時，計時器開始計時，例如從0秒 ~ 30秒。

默認(rèn)值：false

count

number

否

是

計時器時間（isCountDown為true時生效），單位為毫秒。最長不超過86400000毫秒（24小時）。 0<count<86400000時，count值為計時器初始值。否則，使用默認(rèn)值為計時器初始值。

默認(rèn)值：60000

controller

TextTimerController

否

是

TextTimer控制器。

format屬性

設(shè)置自定義格式，需要至少包含一個HH、mm、ss、SS

參數(shù)名	類型	必填	說明
value	string	是	自定義格式。默認(rèn)值：'HH:mm:ss.SS'

參數(shù)名

類型

必填

說明

value

string

是

自定義格式。

默認(rèn)值：'HH:mm:ss.SS'

ontimer事件

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

時間文本發(fā)生變化時觸發(fā)該事件。鎖屏狀態(tài)和應(yīng)用后臺狀態(tài)下不會觸發(fā)該事件。

參數(shù)名	類型	必填	說明
utc	number	是	Linux時間戳，即自1970年1月1日起經(jīng)過的時間，單位為設(shè)置格式的最小單位。
elapsedTime	number	是	計時器經(jīng)過的時間，單位為設(shè)置格式的最小單位。

TextTimerController

TextTimer組件的控制器，用于控制文本計時器。一個TextTimer組件僅支持綁定一個控制器，組件創(chuàng)建完成后相關(guān)指令才能被調(diào)用。

導(dǎo)入對象

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