快捷導(dǎo)航

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

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

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

一、RelativeContainers

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

基礎(chǔ)用法步驟

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

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

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

方向	屬性名	對(duì)齊方式取值（VerticalAlign/HorizontalAlign）	說明
垂直方向	`top`	`Top`/`Center`/`Bottom`	組件的頂部、垂直中心、底部與錨點(diǎn)的對(duì)應(yīng)位置對(duì)齊
垂直方向	`center`	`Top`/`Center`/`Bottom`	同上（`center` 是垂直方向的 “中心對(duì)齊” 屬性，命名容易混淆，需注意）
水平方向	`left`	`Start`/`Center`/`End`	組件的左邊緣、水平中心、右邊緣與錨點(diǎn)的對(duì)應(yīng)位置對(duì)齊（`Start` 對(duì)應(yīng)左，`End` 對(duì)應(yīng)右）
水平方向	`middle`	`Start`/`Center`/`End`	同上（`middle` 是水平方向的 “中心對(duì)齊” 屬性）

使用

//組件居中顯示
 
RelativeContainer() {
  Text("居中組件")
    .width(100)
    .height(100)
    .alignRules({
      center: {anchor: "__container__", align: VerticalAlign.Center}, // 垂直居中
      middle: {anchor: "__container__", align: HorizontalAlign.Center} // 水平居中
    })
}

//組件相對(duì)排列
 
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的頂部對(duì)齊組件A的底部
      left: {anchor: "A", align: HorizontalAlign.End}  // 組件B的左邊緣對(duì)齊組件A的右邊緣
    })
}

注意事項(xiàng)

id 必須唯一：同一 RelativeContainer 內(nèi)的所有子組件 id 不能重復(fù)。
避免循環(huán)依賴：如果組件 A 的錨點(diǎn)是組件 B，組件 B 的錨點(diǎn)又是組件 A，會(huì)導(dǎo)致布局計(jì)算失敗。

二、倒計(jì)時(shí)TextTimer

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

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

名稱

類型

只讀

可選

說明

isCountDown

boolean

否

是

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

默認(rèn)值：false

count

number

否

是

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

默認(rèn)值：60000

controller

TextTimerController

否

是

TextTimer控制器。

format屬性

設(shè)置自定義格式，需要至少包含一個(gè)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)

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

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

TextTimerController

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

導(dǎo)入對(duì)象

textTimerController: TextTimerController = new TextTimerController();

start（）：計(jì)時(shí)開始
pause（）：計(jì)時(shí)暫停
reset（）：重置計(jì)時(shí)器

使用

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

總結(jié)

到此這篇關(guān)于鴻蒙開發(fā)之相對(duì)布局、倒計(jì)時(shí)TextTimer的文章就介紹到這了,更多相關(guān)鴻蒙相對(duì)布局、倒計(jì)時(shí)TextTimer內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: