「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.rhkb.cn/news/465892.html

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

相关文章

什么是大模型?一文读懂大模型的基本概念

大模型是指具有大规模参数和复杂计算结构的机器学习模型。本文从大模型的基本概念出发,对大模型领域容易混淆的相关概念进行区分,并就大模型的发展历程、特点和分类、泛化与微调进行了详细解读,供大家在了解大模型基本知识的过程中起到一定参…

特力康|AI智能激光语音驱鸟器:精准识别,智能驱鸟,安全无忧

AI智能激光语音驱鸟器 随着电力设施的发展,鸟类侵扰问题逐渐引起了广泛关注。特别是在变电站等关键电力设施中,鸟类可能会导致设备短路、物理损害或系统故障,影响电网的稳定性。因此,亟需一种高效、无害的解决方案来解决这一问题…

变异凯撒(Crypto)

目录 解题思路 题目设计原理 总结 解题思路 从题目可以看出,这是凯撒密码,原理应该还是整体偏移,但是变异了。 凯撒密码只有字母的横移,而通过观察我们可知,加密密文包含大小写字母、特殊字符,于是猜想大…

SpringBoot在城镇住房保障系统中的应用案例

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了城镇保障性住房管理系统的开发全过程。通过分析城镇保障性住房管理系统管理的不足,创建了一个计算机管理城镇保障性住房管理系统的方案。文章介绍了城…

轻松实现无网络依赖:手把手教你如何在本地快速部署Llama3模型

我们利用 LM Studio 这款软件来可视化部署 Llama3。 [官网地址] 选择好对应的操作系统下载安装包,在下载好之后进行安装。在安装好之后我们就可以打开软件并使用了: 我们在中间的输入框部分输入 llama 来搜索并安装 llama 系列的模型,不过在…

物联网技术的智能监控

近年来,餐饮行业迅速发展,油烟肆意排放造成的环境污染愈加严重,有效监测、防控油烟问题迫在眉睫。对此,文章设计了一种基于物联网传感技术的油烟监控系统,考虑到餐饮行业使用需求,主控制器选择STM32单片机&…

【深度学习遥感分割|论文解读4】UNetFormer:一种类UNet的Transformer,用于高效的遥感城市场景图像语义分割

【深度学习遥感分割|论文解读4】UNetFormer:一种类UNet的Transformer,用于高效的遥感城市场景图像语义分割 【深度学习遥感分割|论文解读4】UNetFormer:一种类UNet的Transformer,用于高效的遥感城市场景图像语义分割 文章目录 【…

利用 Avalonia UI 构建 Blazor 混合应用程序

Blazor 是一个 .NET 前端框架,用于仅使用 .NET 技术构建 Web 应用程序。2021 年,Blazor 扩展到桌面端,推出了 Blazor Hybrid(混合),使开发者可以在桌面平台上使用已有的技能。 Blazor 混合应用程序是传统的…

深度学习笔记9-实现逻辑回归

Python实现逻辑回归 1.假设函数 import math #sigmoid函数得计算 def sigmoid(z):return 1.0/(1math.exp(-z)) #逻辑回归假设函数的计算 #函数传入参数theta、样本特征向量x和特征值得个数n def hypothesis(theta,x,n):h0.0#保存预测结果for i in range(0,n1):#将theta-i和x…

数据库->事务

目录 一、事务 1.什么是事务 2.事务的ACID特性 1.Atomicity (原⼦性) 2.Consistency (⼀致性) 3.Isolation (隔离性) 4.Durability (持久性) 3.为什么要使用事务 4. 如何使⽤事务 1.查看MySQL中支持事务的存储引擎 2.⾃动/⼿动提交事务 2.1自动提交事务 2.2手动提交…

QCon演讲实录|徐广治:边缘云原生操作系统的设计与思考

10月18日,在 QCon 全球软件开发大会 2024(上海站),火山引擎边缘云资深架构师徐广治围绕火山引擎边缘计算产品背后的算力底座 - 边缘云原生操作系统,探讨如何实现算力服务的混合部署和跨区域弹性调度,以及在…

高效作业之Mybatis缓存

高效作业之Mybatis缓存 引言1. MyBatis的一级缓存1.1. 代码示例一级缓存1.2. 使一级缓存失效的四种情况 2. Mybatis二级缓存2.1. 代码示例二级缓存2.2 使二级缓存失效的情况2.4. 二级缓存配置 3. MyBatis缓存查询的顺序4. 整合第三方缓存EHCache4.1. 添加依赖4.2. 创建EHCache的…

论文阅读笔记-Covariate Shift: A Review and Analysis on Classifiers

前言 标题:Covariate Shift: A Review and Analysis on Classifiers 原文链接:Link\ 我们都知道在机器学习模型中,训练数据和测试数据是不同的阶段,并且,通常是是假定训练数据和测试数据点遵循相同的分布。但是实际上&…

[含文档+PPT+源码等]精品基于PHP实现的会员综合管理平台的设计与实现

基于PHP实现的会员商城平台的设计与实现背景,可以从以下几个方面进行详细阐述: 一、电子商务的兴起与发展 随着Internet的广泛普及,电子商务迅速崛起并成为一种主流的购物趋势。通过网络,消费者可以足不出户地浏览和购买各种各样…

微博舆情分析:使用Python进行深度解析

目录 一、准备工作 二、基础理论知识 三、步骤详解 数据预处理 情感分析 关键词提取 四、案例分享 数据爬取 数据分析 五、优化 六、结论 在当今信息爆炸的时代,社交媒体平台如微博已成为公众表达意见和情感的重要渠道。微博舆情分析通过对大量微博数据进…

GPT原理;ChatGPT 等类似的问答系统工作流程如下;当用户向 ChatGPT 输入一个问题后:举例说明;ChatGPT不是通过索引搜索的传统知识库

目录 GPT原理 GPT架构 GPT 主要基于 Transformer 的解码器部分 ChatGPT 等类似的问答系统工作流程如下: 用户输入 文本预处理 模型处理 答案生成 输出回答 当用户向 ChatGPT 输入一个问题后:举例说明 文本预处理: ChatGPT不是通过索引搜索的传统知识库 GPT GPT…

【C++】C++内存管理(一):new/delete

大家好,我是苏貝,本篇博客带大家了解C的内存管理,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 1.C/C内存分布2. C语言中动态内存管理方式:malloc/calloc/realloc/free3. C内…

选择适合你的报表工具,山海鲸报表与Tableau深度对比

在数据分析和报表制作的领域,企业往往面临着选择合适工具的难题。尤其是当市场上有很多功能强大的工具时,如何从中挑选出最适合自己需求的报表软件成为了一个关键问题。今天,我们将对比两款报表工具——山海鲸报表和Tableau,看看它…

网站架构知识之Ansible(day020)

1.Ansible架构 Inventory 主机清单:被管理主机的ip列表,分类 ad-hoc模式: 命令行批量管理(使用ans模块),临时任务 playbook 剧本模式: 类似于把操作写出脚本,可以重复运行这个脚本 2.修改配置 配置文件:/etc/ansible/ansible.cfg 修改配置文件关闭主机Host_key…

`psdparse`:解锁Photoshop PSD文件的Python密钥

文章目录 psdparse:解锁Photoshop PSD文件的Python密钥背景:为何选择psdparse?psdparse是什么?如何安装psdparse?简单函数使用方法应用场景常见Bug及解决方案总结 psdparse:解锁Photoshop PSD文件的Python密…