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

个人主页→VON

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

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

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

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

目录

前言

界面功能介绍

界面构建思路

头部

中间

底部

代码讲解

知识点概述

全套源代码


前言

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

界面功能介绍

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

界面构建思路

头部

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

中间

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

底部

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

代码讲解

定义组件

html 复制代码
@Entry
@Component
struct Index {

定义状态变量

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

构建UI

html 复制代码
build() {
  Column() {

头部文字部分

html 复制代码
// 头部文字部分,包含标题和计时器
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 = false
        this.TimeController.reset()
      }
    })
}
.width('100%')
.justifyContent(FlexAlign.Center) // 使内容居中对齐
.margin({ top: 20 }) // 设置顶部外边距

中部灯泡部分

html 复制代码
// 中部灯泡部分,根据灯泡状态显示不同的图片
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%' }) // 设置顶部外边距
}

底部按钮部分

html 复制代码
// 底部按钮部分,用于控制灯泡的开关
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还可以用于游戏开发中,比如计时挑战或解谜游戏中的倒计时环节。

全套源代码

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

  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 = false
              this.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%')
  }
}
相关推荐
阿伟来咯~1 分钟前
记录学习react的一些内容
javascript·学习·react.js
许野平16 分钟前
Rust: 利用 chrono 库实现日期和字符串互相转换
开发语言·后端·rust·字符串·转换·日期·chrono
也无晴也无风雨19 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
Suckerbin23 分钟前
Hms?: 1渗透测试
学习·安全·网络安全
狂奔solar27 分钟前
yelp数据集上识别潜在的热门商家
开发语言·python
水豚AI课代表34 分钟前
分析报告、调研报告、工作方案等的提示词
大数据·人工智能·学习·chatgpt·aigc
聪明的墨菲特i35 分钟前
Python爬虫学习
爬虫·python·学习
Diamond技术流43 分钟前
从0开始学习Linux——网络配置
linux·运维·网络·学习·安全·centos
斑布斑布1 小时前
【linux学习2】linux基本命令行操作总结
linux·运维·服务器·学习
blammmp1 小时前
Java:数据结构-枚举
java·开发语言·数据结构