「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用

news/2024/11/6 6:56:58/

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

在这里插入图片描述


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

一、功能说明

在这个猫与灯的互动应用中,用户点击按钮后,猫会在一排灯光中移动,猫所处位置的灯会亮起(on),其余灯则关闭(off)。文本会提示当前亮着的灯位置,以增强互动效果。


二、所需组件
  • @Entry@Component 装饰器
  • ColumnRow 布局组件
  • Image 组件用于展示灯和猫的图片
  • Button 组件用于用户交互
  • ForEach 循环用于动态渲染灯和猫的位置
项目结构
  • 项目名称CatAndLampApp
  • 自定义组件名称CatAndLampPage
  • 代码文件CatAndLampPage.etsIndex.ets

三、代码实现
// CatAndLampPage.ets
@Component
export struct CatAndLampPage {@State currentLampIndex: uiltin">number = 0; // 当前猫所在的灯位置lamps: uiltin">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: uiltin">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 决定是否显示亮灯、关灯或猫的位置,实现动态图片切换。

五、优化建议
  1. 增加动画:可以为猫的移动添加过渡动画,让交互更加流畅。
  2. 灯光颜色变化:在亮灯状态下,添加渐变色效果或光晕效果,增加视觉吸引力。
  3. 音效提示:在猫移动时添加音效,提升用户体验。
  4. 可控移动按钮:增加“上一盏灯”的按钮,使用户能够控制猫前后移动。

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

小结

本篇教程通过实现“猫与灯的互动应用”,你学会了如何使用状态管理、动态渲染组件以及用户交互的基本技巧。这些知识可以应用到更复杂的互动应用开发中。


下一篇预告

在下一篇「UI互动应用篇5 - 滑动选择器实现」中,我们将学习如何实现滑动选择器,帮助用户通过滑动条进行选择并实时显示结果。


上一篇:「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现
下一篇:「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现


http://www.ppmy.cn/news/1544747.html

相关文章

网页中嵌入Unity并传参给Unity

要在网页中嵌入Unity并传参给Unity,你可以使用JavaScript和Unity的SendMessage函数进行通信。以下是实现步骤: 第一步:配置Unity的WebGL构建 1. 在Unity中,将项目设置为WebGL平台: 打开文件 > 构建设置&#xf…

AI开发-三方库-torch-torchvision

1 需求 数据集:torchvision.datasets torchvision.datasets.MNIST数据变换:torchvision.transforms torchvision.transforms.Composetorchvision.transforms.ToTensortorchvision.transforms.Normalize模型:torchvision.models可视化工具&…

Pycharm贪吃蛇小游戏后续2

前文中我们提到用面向对象去编写贪吃蛇 目前功能实现贪吃蛇吃食物,身体加长,其次可以按下-(键盘上右分大小写的-,不是数字的-)来改变speed,终端可以看到速度,后续将陆续实现撞墙死亡&#xff0…

Java 实现接口幂等的九种方法:确保系统稳定性与数据一致性

摘要: 在分布式系统中,接口的幂等性至关重要,它能确保重复请求不会导致意外的副作用。本文深入探讨了 Java 实现接口幂等的九种方法,包括数据库唯一约束、状态机、分布式锁等,并通过详细的代码示例和实际应用场景&…

搭建你的私人云盘:使用File Browser与cpolar实现公网传输文件

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 File Browser是一个开源的文件管理器和文件共享工具,它可以帮助用户轻…

前端入门一之CSS知识详解

前言 CSS是前端三件套之一,在MarkDown中也完美兼容这些语法;这篇文章是本人大一学习前端的笔记;欢迎点赞 收藏 关注,本人将会持续更新。 文章目录 Emmet语法:CSS基本语法:css语法结构只有3种&#xff1a…

FBX福币交易所A股三大指数小幅低开 稀土永磁板块回调

查查配分析11月5日电 周二,A股三大指数小幅低开。沪指开盘跌0.10%报3306.81点,深证成指开盘跌0.09%报10653.20点,创业板指开盘跌0.05%报2184.90点。 FBX福币凭借用户友好的界面和对透明度的承诺,迅速在加密货币市场中崭露头角,成为广大用户信赖的平台。 来源:同花顺iFinD 盘面…

react 18 react-router-dom V6 路由传参的几种方式

路由配置如下 label:"首页",meta:{title:"首页"}},{path: /,// <AutnToken><Layout></Layout></AutnToken>element:<Layout></Layout>,label:"首页",meta:{title:"首页"},children:[{path:/home,…