本篇將帶領(lǐng)你實(shí)現(xiàn)一個(gè)實(shí)用的計(jì)時(shí)器應(yīng)用，用戶可以啟動(dòng)、暫?；蛑刂糜?jì)時(shí)器。該項(xiàng)目將涉及時(shí)間控制、狀態(tài)管理以及按鈕交互，是掌握鴻蒙應(yīng)用開發(fā)的重要步驟。

---

關(guān)鍵詞

• UI互動(dòng)應(yīng)用
• 時(shí)間控制
• 狀態(tài)管理
• 用戶交互

---

一、功能說明

在這個(gè)計(jì)時(shí)器應(yīng)用中，用戶可以通過按鈕來啟動(dòng)、暫停和重置計(jì)時(shí)器。計(jì)時(shí)器會(huì)實(shí)時(shí)更新并顯示時(shí)間，使用戶能夠體驗(yàn)到動(dòng)態(tài) UI 更新的效果。

---

二、所需組件

• @Entry 和 @Component 裝飾器
• Text 組件用于顯示計(jì)時(shí)
• Button 組件用于用戶交互
• setInterval 方法實(shí)現(xiàn)時(shí)間控制

項(xiàng)目結(jié)構(gòu)

• 項(xiàng)目名稱：TimerApp
• 自定義組件名稱：TimerPage
• 代碼文件：TimerPage.ets、Index.ets

---

三、代碼實(shí)現(xiàn)

// TimerPage.ets
@Component
export struct TimerPage {@State timerValue: number = 0; // 控制計(jì)時(shí)器的值@State isRunning: boolean = false; // 控制計(jì)時(shí)器狀態(tài)private intervalId: number | null = null; // 定時(shí)器 IDbuild() {Column({ space: 20 }) {// 顯示當(dāng)前計(jì)時(shí)器值Text(`${Math.floor(this.timerValue / 60).toString().padStart(2, '0')}:${(this.timerValue % 60).toString().padStart(2, '0')}`).fontSize(48).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 按鈕交互行Row({ space: 20 }) {Button(this.isRunning ? '暫停' : '開始').onClick(() => {if (this.isRunning) {this.stopTimer(); // 暫停計(jì)時(shí)器} else {this.startTimer(); // 啟動(dòng)計(jì)時(shí)器}});Button('重置').onClick(() => {this.resetTimer(); // 重置計(jì)時(shí)器});}.justifyContent(FlexAlign.Center);}.padding(20).height('100%').width('100%').alignItems(HorizontalAlign.Center);}private startTimer() {this.isRunning = true;if (this.intervalId === null) {this.intervalId = setInterval(() => {this.timerValue += 1;}, 1000);}}private stopTimer() {this.isRunning = false;if (this.intervalId !== null) {clearInterval(this.intervalId);this.intervalId = null;}}private resetTimer() {this.stopTimer();this.timerValue = 0;}
}

// Index.ets
import { TimerPage } from './TimerPage'@Entry
@Component
struct Index {build() {Column() {TimerPage() // 調(diào)用自定義組件}.padding(20) // 設(shè)置頁(yè)面內(nèi)邊距}
}

效果示例：用戶點(diǎn)擊“開始”按鈕時(shí)，計(jì)時(shí)器開始計(jì)時(shí)；點(diǎn)擊“暫停”按鈕，計(jì)時(shí)器暫停；點(diǎn)擊“重置”按鈕，計(jì)時(shí)器重置為 0。

---

四、代碼解讀

• setInterval()：
  用于每秒更新一次 timerValue，實(shí)現(xiàn)計(jì)時(shí)功能。

• clearInterval()：
  用于停止計(jì)時(shí)器，避免計(jì)時(shí)繼續(xù)。

• @State 修飾符：
  管理組件狀態(tài)，確保計(jì)時(shí)器值和按鈕顯示的動(dòng)態(tài)更新。

---

五、相關(guān)知識(shí)點(diǎn)

• 「Mac暢玩鴻蒙與硬件11」鴻蒙UI組件篇1 - Text 和 Button 組件詳解
• 「Mac暢玩鴻蒙與硬件18」鴻蒙UI組件篇8 - 高級(jí)動(dòng)畫效果與緩動(dòng)控制

---

小結(jié)

本篇教程通過實(shí)現(xiàn)一個(gè)計(jì)時(shí)器應(yīng)用，展示了如何在鴻蒙中使用狀態(tài)管理和時(shí)間控制來實(shí)現(xiàn)動(dòng)態(tài)交互。學(xué)會(huì)這些后，你可以將時(shí)間管理功能運(yùn)用到更多復(fù)雜的應(yīng)用中。

---

下一篇預(yù)告

在下一篇「UI互動(dòng)應(yīng)用篇3」中，我們將進(jìn)一步探討如何在應(yīng)用中集成倒計(jì)時(shí)和定時(shí)提醒功能，學(xué)習(xí)更多時(shí)間相關(guān)的高級(jí)應(yīng)用。

---

上一篇：「Mac暢玩鴻蒙與硬件24」UI互動(dòng)應(yīng)用篇1 - 燈光控制小項(xiàng)目

下一篇：「Mac暢玩鴻蒙與硬件26」UI互動(dòng)應(yīng)用篇3 - 倒計(jì)時(shí)和提醒功能實(shí)現(xiàn)

---