「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
本篇将带领你实现一个趣味十足的互动应用,用户点击按钮时猫会在一排灯之间移动,猫所在的位置灯会亮起(on),其余灯会熄灭(off)。应用会根据用户的操作动态更新灯光状态和文本提示当前亮灯的位置,是掌握状态管理和组件动态渲染的良好实践。

关键词
- UI互动应用
- 状态管理
- 动态图片加载
- 用户交互
一、功能说明
在这个猫与灯的互动应用中,用户点击按钮后,猫会在一排灯光中移动,猫所处位置的灯会亮起(on),其余灯则关闭(off)。文本会提示当前亮着的灯位置,以增强互动效果。
二、所需组件
@Entry和@Component装饰器Column和Row布局组件Image组件用于展示灯和猫的图片Button组件用于用户交互ForEach循环用于动态渲染灯和猫的位置
项目结构
- 项目名称:
CatAndLampApp - 自定义组件名称:
CatAndLampPage - 代码文件:
CatAndLampPage.ets、Index.ets
三、代码实现
// CatAndLampPage.ets
@Component
export struct CatAndLampPage {@State currentLampIndex: number = 0; // 当前猫所在的灯位置lamps: number[] = [1, 2, 3, 4, 5, 6]; // 灯的索引build() {Column({ space: 20 }) {// 显示当前亮灯的提示文本Row() {Text(`当前亮着的灯是: 灯${this.currentLampIndex + 1}`).fontSize(25).fontWeight(FontWeight.Bold).fontColor(Color.Blue);}// 渲染灯和猫的位置Row({ space: 10 }) {ForEach(this.lamps, (index: number) => {Column() {// 如果当前灯是猫所在的位置,显示亮灯和猫if (this.currentLampIndex === index - 1) {Image($r(`app.media.light_on_${index}`)).width(130).height(150).borderRadius(10); // 增加灯的圆角效果Image($r('app.media.cat')).width(85).height(100).borderRadius(5); // 增加猫的圆角效果} else {// 其他位置显示关灯Image($r(`app.media.light_off_${index}`)).width(130).height(150).borderRadius(10).margin(20)}}});}// 控制猫移动的按钮Row({ space: 20 }) {Button('下一步').onClick(() => {this.moveCatToNextLamp();}).fontSize(20).backgroundColor(Color.Green).fontColor(Color.White);}.justifyContent(FlexAlign.Center);}.padding(20).height('100%').width('100%').alignItems(HorizontalAlign.Center);}private moveCatToNextLamp() {// 更新当前猫的位置this.currentLampIndex = (this.currentLampIndex + 1) % this.lamps.length;}
}
// Index.ets
import { CatAndLampPage } from './CatAndLampPage'@Entry
@Component
struct Index {build() {Column() {CatAndLampPage() // 调用自定义组件}.padding(20) // 设置页面内边距}
}
效果示例:用户点击“下一步”按钮时,猫会移动到下一个灯的位置,当前灯亮起并显示猫,其他灯熄灭,文本提示当前亮着的灯。
四、代码解读
ForEach():
使用ForEach()循环渲染灯和猫的图片,实现动态布局。@State currentLampIndex:
用于管理猫当前所在灯的位置,保证 UI 在状态变化时自动更新。Image():
根据currentLampIndex决定是否显示亮灯、关灯或猫的位置,实现动态图片切换。
五、优化建议
- 增加动画:可以为猫的移动添加过渡动画,让交互更加流畅。
- 灯光颜色变化:在亮灯状态下,添加渐变色效果或光晕效果,增加视觉吸引力。
- 音效提示:在猫移动时添加音效,提升用户体验。
- 可控移动按钮:增加“上一盏灯”的按钮,使用户能够控制猫前后移动。
六、相关知识点
- 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text 和 Button 组件详解
- 「Mac畅玩鸿蒙与硬件12」鸿蒙UI组件篇2 - Image组件的使用
小结
本篇教程通过实现“猫与灯的互动应用”,你学会了如何使用状态管理、动态渲染组件以及用户交互的基本技巧。这些知识可以应用到更复杂的互动应用开发中。
下一篇预告
在下一篇「UI互动应用篇5 - 滑动选择器实现」中,我们将学习如何实现滑动选择器,帮助用户通过滑动条进行选择并实时显示结果。
上一篇:「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
下一篇:「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
相关文章:
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
本篇将带领你实现一个趣味十足的互动应用,用户点击按钮时猫会在一排灯之间移动,猫所在的位置灯会亮起(on),其余灯会熄灭(off)。应用会根据用户的操作动态更新灯光状态和文本提示当前亮灯的位置&…...
Spring-Day4
12.HelloSpring <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance" xmlns:util"http://www.springframework…...
C#-类:成员属性
数据成员 ≠ 属性 成员属性 属性可以理解为一种封装 成员属性概念:一般是用来保护成员变量的 成员属性的使用和变量一样,外部用对象点出 get中需要return内容 ; set中用value表示传入的内容 get和set语句块中可以加逻辑处理。应用&#…...
qt QDragEnterEvent详解
1、概述 QDragEnterEvent是Qt框架中用于处理拖放进入事件的一个类。当用户将一个拖拽对象(如文件、文本或其他数据)拖动到支持拖放操作的窗口部件(widget)上时,系统会触发QDragEnterEvent事件。这个类允许开发者在拖拽…...
Vue项目与IE浏览器的兼容性分析(Vue|ElementUI)
总体分析 Vue.js的兼容性在不同版本间有所差异,具体针对IE浏览器的推荐版本如下: Vue 2.x 官方支持:Vue 2.x版本官方宣布支持IE9及以上版本的IE浏览器。限制与Polyfill:虽然Vue 2.x支持IE9及以上版本,但在使用时可能…...
【C++之STL】一文学会使用 string
文章目录 1. STL导读1. 1 什么是STL1. 2 STL的版本1. 3 STL六大组件1. 4 STL的重要性1. 5 STL的学习1. 6 STL系列博客的规划 2. string2. 1 为什么学习string类?2. 2 标准库中的string2. 3 基本构造2. 4 尾插与输出运算符重载2. 5 构造函数2. 6 赋值运算符重载2. 7 容量操作2.…...
好用的办公套件--- ONLYOFFICE
目录 引言 UI界面 ONLYOFFICE 协作空间 使用协作空间三步走 一、注册与登录 二、创建房间 三、上传与编辑文档 ONLYOFFICE协作空间的安全性 ONLYOFFICE 文档 关于 ONLYOFFICE 引言 ONLYOFFICE 桌面编辑器 ONLYOFFICE是一款功能全面的办公套件,支持文档、表…...
Android View事件分发
目录 1.什么是View事件分发? 2.事件的类型 3.事件的发生 4.事件分发的方法 4.1 dispatchTouchEvent() 4.2 onTouchEvent() 4.3 onInterceptTouchEvent() 5.滑动冲突 5.1 外部拦截法 5.2内部拦截法 6.onTouch的执行高于onClick 7. onTouch()和onTouchEve…...
攻防世界GFSJ1229 Three
题目编号:GFSJ1229 解题过程 1. 附件下载是三个压缩包A.zip B.zip C.zip和一个python程序Three.py 2. A.zip可以直接解压出来,内容如下: 2022-08-27 20:16:04.246131 Func A0*X0B0 2022-08-27 20:16:05.116859 Read_Data A0.txt->A0(28829613228…...
2023 icpc杭州(M,J,D,G,H)
文章目录 [M. V-Diagram](https://codeforces.com/gym/104976/problem/M)[J. Mysterious Tree](https://codeforces.com/gym/104976/problem/J)[D.Operator Precedence](https://codeforces.com/gym/104976/problem/D)[G. Snake Move](https://codeforces.com/gym/104976/probl…...
在CentOS 7上安装Alist
在CentOS 7上安装Alist 的步骤如下: 1. 卸载旧版本 如果你之前安装过旧版本的Docker,可以先卸载它: sudo yum remove docker docker-common docker-snapshot docker-engine2. 安装依赖包 确保你的系统是最新的,并安装必要的依…...
【C/C++】memcpy函数的模拟实现
零.导言 上一篇博客我们学习了memcpy函数,不妨我们现在尝试模拟实现memcpy函数的功能。 一.实现memcpy函数的要点 memcpy函数是一种C语言内存函数,可以按字节拷贝任意类型的数组,因此我们自定义的模拟函数需要两个无类型的指针参数ÿ…...
嵌入式开发之线程互斥
目录 互斥锁初始化-pthread_mutex_init 申请锁-pthread_mutex_lock 释放锁-pthread_mutex_unlock 同步 VS 互斥 临界资源:一次只允许一个任务(进程、线程)访问的共享资源,不允许多个任务同时访问的。 临界区:访问临界区的代码 互斥机制:mutex互斥锁,任务访问临界资…...
JavaScript 变量作用域与函数调用机制:var 示例详解
JavaScript 变量作用域与函数调用机制:var 示例详解 在 JavaScript 中,作用域和闭包是理解变量生命周期和行为的核心概念。通过以下这段代码,我们将详细分析如何在不同的作用域内使用 var 关键字,并解释相关的变量访问规则 代码解…...
Linux(CentOS)安装 JDK
1、下载 JDK 官网:https://www.oracle.com/ 2、上传 JDK 文件到 CentOS,使用FinalShell远程登录工具,并且使用 root 用户登录 3、解压 JDK 创建目录 /export/server mkdir -p /export/server 解压到目录 /export/server tar -zxvf jdk-17…...
AI产品经理实战手册:策略、开发与商业化指南
通过《AI产品经理手册》,将可以了解不同类型的AI,如何将AI整合到产品或业务中,以及支持创建AI产品或将AI集成到现有产品所需的基础设施。熟悉实践管理AI产品开发流程、评估和优化AI模型,以及应对与AI产品相关的复杂伦理和法律问题…...
【大语言模型】ACL2024论文-06 探索思维链COT在多模态隐喻检测中的应用
【大语言模型】ACL2024论文-06 探索思维链COT在多模态隐喻检测中的应用 目录 文章目录 【大语言模型】ACL2024论文-06 探索思维链COT在多模态隐喻检测中的应用目录摘要研究背景问题与挑战如何解决创新点算法模型1. 知识总结模块(Knowledge Summarization Module&…...
Linux之初体验
目录 第1关:1-Linux初体验 第2关:1-Linux常用命令 第3关:1-Linux 查询命令帮助语句 第4关:2--查询命令-locate 第5关:2--查询命令-which/whereis 第6关:2--查询命令-find 第7关:3-Linux文…...
现代化水电管理:Spring Boot在大学城的实践
2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统,它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等,非常…...
黑马官网2024最新前端就业课V8.5笔记---HTML篇
Html 定义 HTML 超文本标记语言——HyperText Markup Language。 标签语法 标签成对出现,中间包裹内容<>里面放英文字母(标签名)结束标签比开始标签多 /拓展 : 双标签:成对出现的标签 单标签:只有开…...
ScanTailor Advanced:免费开源扫描文档处理终极指南
ScanTailor Advanced:免费开源扫描文档处理终极指南 【免费下载链接】scantailor-advanced ScanTailor Advanced is the version that merges the features of the ScanTailor Featured and ScanTailor Enhanced versions, brings new ones and fixes. 项目地址: …...
Pi0 Web演示服务监控:Prometheus+Grafana指标采集与告警配置
Pi0 Web演示服务监控:PrometheusGrafana指标采集与告警配置 1. 项目概述与监控需求 Pi0作为一个先进的视觉-语言-动作流机器人控制模型,其Web演示服务的稳定运行对于用户体验和开发测试至关重要。在生产环境中,我们需要实时掌握服务的运行状…...
无GPU方案:星图平台OpenClaw镜像+百川2-13B-4bits的云端沙盒体验
无GPU方案:星图平台OpenClaw镜像百川2-13B-4bits的云端沙盒体验 1. 为什么选择云端沙盒方案 作为一个长期折腾本地AI部署的技术爱好者,我最近遇到了一个典型困境:想体验最新的OpenClaw智能体框架,但手头的MacBook Pro只有集成显…...
VibeVoice多音色展示:从儿童到老人的自然过渡效果
VibeVoice多音色展示:从儿童到老人的自然过渡效果 1. 引言 你有没有想过,一段文字可以同时用儿童的天真嗓音、青年的清澈声线、中年的沉稳语调,以及老者的沧桑音色来演绎?这不是科幻电影中的场景,而是VibeVoice带来的…...
Clipy:macOS效率工具中的自动化剪贴板增强专家
Clipy:macOS效率工具中的自动化剪贴板增强专家 【免费下载链接】Clipy Clipboard extension app for macOS. 项目地址: https://gitcode.com/gh_mirrors/cl/Clipy 你是否曾遇到这样的窘境:刚复制的重要文本被新内容覆盖,不得不重新打开…...
OpenClaw多模态扩展:结合百川2-13B-4bits与OCR的图像信息处理流程
OpenClaw多模态扩展:结合百川2-13B-4bits与OCR的图像信息处理流程 1. 为什么需要多模态能力扩展? 上周我需要整理一批技术文档的截图,包含代码片段、错误日志和流程图。手动转录不仅耗时,还容易出错。这让我开始思考:…...
MetaTube插件:如何让Jellyfin媒体库实现智能元数据管理
MetaTube插件:如何让Jellyfin媒体库实现智能元数据管理 【免费下载链接】jellyfin-plugin-metatube MetaTube Plugin for Jellyfin/Emby 项目地址: https://gitcode.com/gh_mirrors/je/jellyfin-plugin-metatube 你是否曾经花费数小时手动整理电影库的元数据…...
NaViL-9B多模态提示工程:图文联合prompt编写技巧与示例
NaViL-9B多模态提示工程:图文联合prompt编写技巧与示例 1. 多模态模型简介 NaViL-9B是一款原生支持多模态交互的大语言模型,能够同时处理文本和图像输入。与传统的纯文本模型不同,它具备视觉理解能力,可以分析图片内容并与用户进…...
EcomGPT中英文7B模型部署案例:跨境电商运营者如何用一行bash启动AI助手
EcomGPT中英文7B模型部署案例:跨境电商运营者如何用一行bash启动AI助手 1. 项目概述 EcomGPT电商领域智能助手是基于阿里EcomGPT-7B-Multilingual多语言电商大模型开发的Web应用。这个工具专门为电商从业者设计,通过直观的网页界面提供商品分类、属性提…...
PasteMD助力程序员提效:代码片段/日志/报错信息一键转高亮Markdown
PasteMD助力程序员提效:代码片段/日志/报错信息一键转高亮Markdown 1. 引言:从杂乱文本到优雅文档的烦恼 你有没有过这样的经历?在技术讨论群里,同事发来一段报错日志,密密麻麻的堆栈信息挤在一起,看得人…...
