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

2024-08-24 19:52

本文主要是介绍【HarmonyOS NEXT星河版开发实战】灯泡定时开关,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

个人主页→VON

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

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

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

gitee地址icon-default.png?t=N7T8https://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%')}
}

这篇关于【HarmonyOS NEXT星河版开发实战】灯泡定时开关的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1103450

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta