「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目

本篇将带领你实现一个互动性十足的灯光控制小项目,用户可以通过点击按钮来控制灯光的开关。该项目将涉及状态管理、动态图片加载以及按钮交互,是学习鸿蒙应用开发的重要基础。

在这里插入图片描述


关键词
  • UI互动应用
  • 状态管理
  • 动态图片加载
  • 用户交互

一、功能说明

在这个灯光控制应用中,用户可以通过点击“开灯”或“关灯”按钮来切换灯光状态。应用会根据用户的操作动态显示不同的灯光图片。我们将使用动态路径加载图像,并结合按钮交互来完成这一功能。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Image 组件用于展示不同状态的图片
  • Button 组件用于用户交互
项目结构
  • 项目名称LightControlApp
  • 自定义组件名称LightPage
  • 代码文件LightPage.etsIndex.ets

三、代码实现
// LightPage.ets
@Component
export struct LightPage {@State isOn: boolean = false; // 控制灯光状态@State imageIndex: number = 1; // 控制加载图片的索引build() {Column({ space: 20 }) {// 动态加载图片,根据状态显示不同灯光图片Image(this.isOn ? $r(`app.media.light_on_${this.imageIndex + 1}`) : $r(`app.media.light_off`)).height(300).width(300).borderRadius(20);// 提供按钮交互Row({ space: 50 }) {Button('关灯').onClick(() => {this.isOn = false; // 切换状态为关灯this.imageIndex = Math.floor(Math.random() * 6) + 1; // 随机更换图片索引});Button('开灯').onClick(() => {this.isOn = true; // 切换状态为开灯this.imageIndex = Math.floor(Math.random() * 6) + 1; // 随机更换图片索引});}}.height('100%').width('100%').justifyContent(FlexAlign.Center); // 布局居中显示}
}
// Index.ets
import { LightPage } from './LightPage'@Entry
@Component
struct Index {build() {Column() {LightPage() // 调用自定义组件}.padding(20) // 设置页面内边距}
}

效果示例:点击“开灯”或“关灯”按钮时,页面会动态加载随机灯光图片,增强用户体验。
在这里插入图片描述


四、代码解读
  • Image()
    根据 isOn 状态选择加载“开灯”或“关灯”图片,通过 imageIndex 实现随机图片的选择。

  • Math.floor(Math.random() * 6) + 1
    生成 1 到 6 的随机整数,确保每次点击按钮时加载不同的图片,提升用户体验。

  • @State 修饰符
    用于管理组件内的状态,确保 UI 根据状态变化进行重新渲染。


五、相关知识点
  • 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
  • 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用

小结

本篇教程通过实现灯光控制小项目,让你深入理解了如何利用鸿蒙框架进行状态管理和实现动态图片加载。掌握了这些技巧后,你可以轻松地创建更多的互动性应用。


下一篇预告

在下一篇「UI互动应用篇2」中,我们将探讨如何实现一个计时器应用,学习更多的时间控制与动态 UI 更新的实现方法。


上一篇:「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用
下一篇:「Mac畅玩鸿蒙与硬件25」UI互动应用篇2 - 计时器应用实现

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57905.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自制inscode项目推荐:色块小游戏

小编的inscode部署项目:割绳子游戏。 更多精彩内容见InsCode - 让你的灵感立刻落地~ 介绍一下项目及玩法。 游戏概述 颜色匹配小游戏是一款基于HTML、CSS和JavaScript开发的简单而有趣的网页游戏。游戏的目标是通过点击颜色块,将整个游戏板上的所有方块…

DevOps赋能:优化业务价值流的实战策略与路径(下)

下篇:加速工作项流动与持续改进优化 —— 跨越差距,迈向卓越交付 在上篇中,我们已经深入探讨了看板方法的四大核心实践,它们共同致力于实现“顺畅且高质量地交付价值”的终极目标。然而,理想与现实之间往往存在一定的…

使用带有令牌认证的 Jupyter Notebook 服务器

当你不想在默认浏览器打开Jupyter Notebook,但是在其他浏览器打开http://localhost:8890/lab或者http://localhost:8889/tree,却显示 Token authentication is enabled,如下图 可以按以下步骤操作: 获取令牌:在启动 Jupyter Note…

FRIENDLYARM Tiny6410 superboot烧写进sd卡教程

友善之臂真的垃圾,pdf乱不说,资料在哪也不说,没有视频教程,就染你自己去一堆资料里找,** superboot在资料B盘tooles-image里 注意有些朋友scan不到sd卡是因为没有给这个软件开启管理员模式,他没权限去扫描…

宝藏虚拟化学习资料大全

最近发现了关于虚拟化的宝藏资料,瑞斯拜!原文链接如下: 500篇关于虚拟化的经典资料,含CPU虚拟化,磁盘虚拟化,内存虚拟化,IO虚拟化。 目录 🪐 虚拟化基础 🍃 虚拟化分类&…

C++模拟真人动态生成鼠标滑动路径

一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言,原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势: 模拟…

【Redis实践】使用zset实现实时排行榜以及一些优化思考

文章目录 1.概述2.zset的基本概念说明2.1.数据结构说明2.2.zset做排行榜的指令 3. 项目中的实践3.1.RedisTemplate实现排行榜3.2.可能存在的问题及解决方案3.2.1. 限制成员的数量3.2.2.保留当前分数与最高分数3.2.3.批量操作成员分数,减少并发 4.总结 1.概述 我们在…

C++_STL_xx_番外01_关于STL的总结(常见容器的总结;关联式容器分类及特点;二叉树、二叉搜索树、AVL树(平衡二叉搜索树)、B树、红黑树)

文章目录 1. 常用容器总结2. 关联式容器分类3. 二叉树、二叉搜索树、AVL树、B树、红黑树 1. 常用容器总结 针对常用容器的一些总结: 2. 关联式容器分类 关联式容器分为两大类: 基于红黑树的set和map;基于hash表的unorder_set和unorder_ma…

【LwIP源码学习4】主线程tcpip_thread

前言 本文对lwip的主要线程tcpip_thread进行分析。 正文 tcpip_thread是lwip最主要的线程,其创建在tcpip_init函数中 sys_thread_new(TCPIP_THREAD_NAME, tcpip_thread, NULL, TCPIP_THREAD_STACKSIZE, TCPIP_THREAD_PRIO);tcpip_init函数被TCPIP_Init函数调用。…

光圈,感光度,感光器件

光圈(通光孔),是一个用来控制光线透过镜头进入机身内感光面光量的装置,通常设置在镜头内。通常,我们用f值来表达光圈大小。通俗来说,摄像机镜头拍照时,不可能随意改变镜头直径,但可以…

Llama 3.2 Vision Molmo:多模态开源生态系统基础

编者按: 视觉功能的融入对模型能力和推理方式的影响如何?当我们需要一个既能看懂图像、又能生成文本的 AI 助手时,是否只能依赖于 GPT-4V 这样的闭源解决方案? 我们今天为大家分享的这篇文章,作者的核心观点是&#xf…

高效视频制作大提速,视频剪辑软件的高级自定义命令功能批量调整视频的色调、饱和度和亮度,轻松驾驭视频编辑技巧

在浩瀚的数字海洋中,视频如同璀璨的星辰,而每一颗星辰都渴望被精心雕琢,闪耀出最独特的光芒。想象一下,你手握一把神奇的钥匙,能够轻松解锁批量视频剪辑的奥秘,让每一帧画面都跃动着你的创意与激情。这把钥…

[RootersCTF2019]ImgXweb

审题 看到robots.txt,看到里面的文件,打开看到 you-will-never-guess这个字符串 进行注册登录 可以看到典型的jwt加密的Cookie 想到之前的字符串可能是密匙,更改为admin,进行登录。 成功后可以看到flag.png。 发现图形打不开 使用curl进…

32单片机HAL库的引脚初始化

在使用HAL库时,GPIO初始化函数定义在stm32f4xx_hal_gpio.c文件中,如下: void HAL_GPIO_Init(GPIO_TypeDef *GPIOx, GPIO_InitTypeDef *GPIO_Init); 由这个函数可以看出,在初始化GPIO时,需要向函数传入2个结构体&…

ubuntu【桌面】 配置NAT模式固定IP

DHCP分配导致虚拟机IP老变,SSH老要重新配置,设成静态方便些 一、设NAT模式 1、设为NAT模式 2、看模式对应的虚拟网卡 - VMnet8 3、共享主机网卡网络到虚拟网卡 - VMnet8 二、为虚拟网卡设置静态IP 记住这个IP 三、设置ubuntu固定IP 1、关闭DHCP并…

确保企业架构与业务的一致性与合规性:数字化转型中的关键要素与战略实施

在现代企业的数字化转型过程中,确保企业架构(Enterprise Architecture, EA)与企业业务的紧密一致性与合规性至关重要。无论是在战略层面还是运营层面,EA都为企业的未来发展提供了清晰的蓝图,确保企业在应对复杂的业务环…

Pinctrl子需要中client端使用pinctrl过程的驱动分析

往期内容 本专栏往期内容: Pinctrl子系统和其主要结构体引入Pinctrl子系统pinctrl_desc结构体进一步介绍Pinctrl子系统中client端设备树相关数据结构介绍和解析inctrl子系统中Pincontroller构造过程驱动分析:imx_pinctrl_soc_info结构体 input子系统专栏…

Failed to search for file: Cannot update read-only repo

今天在读《Linux就该这么学》并上机操作RedHat Linux 8。结果在执行指令时却出现了问题: 我明明已经是root权限了,我于是上网去找,但也没看到合适的解答。为什么会和书上的操作结果不一样。 后来我突然意识到是不是我打了不该打的空格,于是…

SpringBoot实现验证码案例

目录 实现逻辑前后端交互接口前端代码后端代码 实现逻辑 1、后端功能:随机生成验证码图片,并把交给前端、接收用户输入,验证用户输入的验证码是否正确、 2、前端功能:显示验证码,提供输入框供用户输入他们看到的验证…

OpenCV基本操作(python开发)——(7)实现图像校正

OpenCV基本操作(python开发)——(1) 读取图像、保存图像 OpenCV基本操作(python开发)——(2)图像色彩操作 OpenCV基本操作(python开发)——(3&…