【HarmonyOS NEXT星河版开发实战】灯泡定时开关

个人主页→VON

收录专栏→鸿蒙综合案例开发

代码及其图片资源会发布于gitee上面（已发布）

所有与鸿蒙开发有关的知识点都会在gitee上面进行发布

gitee地址https://gitee.com/wang-xin-jie234

前言

界面功能介绍

界面构建思路

头部

中间

底部

代码讲解

知识点概述

全套源代码

前言

该案例是一个小型的娱乐项目，主要是定时器的应用。功能并不是很强大，只是简单图片的变化。有兴趣的小伙伴们可以根据界面效果自己进行实现。

界面功能介绍

头部有倒计时的数字，此案例是以三秒举例，当点击开关时开始计时，同时灯泡会变成红色，等倒计时结束后灯泡会重新变暗。

界面构建思路

头部

由于整体的UI界面较为简洁，所以就不做过多的赘述了。逻辑部分可以根据注释来慢慢琢磨，主要是对定时器组件的应用。

中间

中间部分主要是通过条件语句对灯泡的颜色进行改变，灯泡初始时的颜色为灰色，当点击底部按钮的时候会变成红色，表示灯泡亮起时的颜色。

底部

底部主要是通过一个按钮来控制灯泡的状态，当点击按钮的时候不仅灯泡的状态会改变，计时器也会启动来倒计时。

代码讲解

定义组件：

@Entry
@Component
struct Index {

定义状态变量：

// 初始灯泡状态，false表示灯泡关闭，true表示灯泡打开
@State isOpen: boolean = false
// 控制器，用于控制计时器
TimeController: TextTimerController = new TextTimerController()
// 点击按钮后记录下当前的时间，用于计算灯泡开启的时间
@State time: number = 0

构建UI：

build() {Column() {

头部文字部分：

// 头部文字部分，包含标题和计时器
Column({ space: 20 }) {// 标题文本Text('灯泡定时开关').fontSize(30)// 计时器组件，设置为倒计时模式，倒计时时间为3000毫秒TextTimer({ isCountDown: true, count: 3000, controller: this.TimeController }).fontSize(30).fontWeight(700).format('mm:ss.SS') // 设置计时器显示格式.onTimer((utc: number) => {// 当计时器触发时，检查当前时间与记录时间的差值是否大于3000毫秒if (utc - this.time > 3000) {// 如果超过3000毫秒，关闭灯泡并重置计时器this.isOpen = falsethis.TimeController.reset()}})
}
.width('100%')
.justifyContent(FlexAlign.Center) // 使内容居中对齐
.margin({ top: 20 }) // 设置顶部外边距

中部灯泡部分：

// 中部灯泡部分，根据灯泡状态显示不同的图片
if (this.isOpen === false) {// 如果灯泡关闭，显示关闭状态的图片Image($r('app.media.bulboff')).width('60%').margin({ top: '40%' }) // 设置顶部外边距
} else {// 如果灯泡打开，显示打开状态的图片Image($r('app.media.bulbon')).width('60%').margin({ top: '40%' }) // 设置顶部外边距
}

底部按钮部分：

// 底部按钮部分，用于控制灯泡的开关
Button('开关').margin({ top: '40%' }) // 设置顶部外边距.width('50%').fontWeight(700).fontSize(20).onClick(() => {// 切换灯泡状态this.isOpen = !this.isOpen// 记录当前时间this.time = new Date().getTime()if (this.isOpen) {// 如果灯泡打开，启动计时器this.TimeController.start()} else {// 如果灯泡关闭，重置计时器this.TimeController.reset()}})
}
.width('100%')
.height('100%')

知识点概述

鸿蒙开发中的计时器组件，主要是通过TickTimer组件来实现的。鸿蒙操作系统（HarmonyOS）是华为推出的一款面向全场景的分布式操作系统，旨在通过一个统一的操作平台，实现智能设备间的无缝连接和协同工作。在鸿蒙系统中，为了实现计时器功能，开发者可以利用TickTimer组件。这个组件是Text组件的一个子类，它能够继承并使用Text组件的一系列属性，比如字体大小、颜色等。

鸿蒙开发的计时器组件TickTimer具有丰富的属性和方法。TickTimer组件拥有多个属性，如format和count_down。通过设置这些属性，开发者可以自定义计时器的显示格式以及计时的方向，即正计时或倒计时。此外，TickTimer还提供了开始、暂停、重置等方法，使得计时器的操作更加灵活多样。

TickTimer组件的应用非常广泛，它可以被用于各种需要计时的场景，如运动计时、烹饪计时、学习计时等。例如，在一个健身应用中，可以通过TickTimer组件来帮助用户记录每个运动动作的持续时间。在教育应用中，可以利用TickTimer来设定阅读或学习的时长，帮助使用者管理时间。此外，TickTimer还可以用于游戏开发中，比如计时挑战或解谜游戏中的倒计时环节。

全套源代码

@Entry
@Component
struct Index {// 初始灯泡状态，false表示灯泡关闭，true表示灯泡打开@State isOpen: boolean = false// 控制器，用于控制计时器TimeController: TextTimerController = new TextTimerController()// 点击按钮后记录下当前的时间，用于计算灯泡开启的时间@State time: number = 0build() {Column() {// 头部文字部分，包含标题和计时器Column({ space: 20 }) {// 标题文本Text('灯泡定时开关').fontSize(30)// 计时器组件，设置为倒计时模式，倒计时时间为3000毫秒TextTimer({ isCountDown: true, count: 3000, controller: this.TimeController }).fontSize(30).fontWeight(700).format('mm:ss.SS') // 设置计时器显示格式.onTimer((utc: number) => {// 当计时器触发时，检查当前时间与记录时间的差值是否大于3000毫秒if (utc - this.time > 3000) {// 如果超过3000毫秒，关闭灯泡并重置计时器this.isOpen = falsethis.TimeController.reset()}})}.width('100%').justifyContent(FlexAlign.Center) // 使内容居中对齐.margin({ top: 20 }) // 设置顶部外边距// 中部灯泡部分，根据灯泡状态显示不同的图片if (this.isOpen === false) {// 如果灯泡关闭，显示关闭状态的图片Image($r('app.media.bulboff')).width('60%').margin({ top: '40%' }) // 设置顶部外边距} else {// 如果灯泡打开，显示打开状态的图片Image($r('app.media.bulbon')).width('60%').margin({ top: '40%' }) // 设置顶部外边距}// 底部按钮部分，用于控制灯泡的开关Button('开关').margin({ top: '40%' }) // 设置顶部外边距.width('50%').fontWeight(700).fontSize(20).onClick(() => {// 切换灯泡状态this.isOpen = !this.isOpen// 记录当前时间this.time = new Date().getTime()if (this.isOpen) {// 如果灯泡打开，启动计时器this.TimeController.start()} else {// 如果灯泡关闭，重置计时器this.TimeController.reset()}})}.width('100%').height('100%')}
}