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

本篇将领导你实现一个意见意义十足的互动应用，用户点击按钮时猫会在一排灯之间移动，猫所在的位置灯会亮起（on），别的灯会熄灭（off）。应用会根据用户的使用动态更新灯光状态和文本提示当前亮灯的位置，是把握状态管理和组件动态渲染的精良实践。

---

关键词

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

---

一、功能阐明

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

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• Column 和 Row 结构组件
  
• Image 组件用于展示灯和猫的图片
  
• Button 组件用于用户交互
  
• ForEach 循环用于动态渲染灯和猫的位置
  

项目结构

• 项目名称：CatAndLampApp
  
• 自界说组件名称：CatAndLampPage
  
• 代码文件：CatAndLampPage.ets、Index.ets
  

---

三、代码实现

1. // CatAndLampPage.ets
2. @Component
3. export struct CatAndLampPage {
4.   @State currentLampIndex: number = 0; // 当前猫所在的灯位置
5.   lamps: number[] = [1, 2, 3, 4, 5, 6]; // 灯的索引
7.   build() {
8.     Column({ space: 20 }) {
9.       // 显示当前亮灯的提示文本
10.       Row() {
11.         Text(`当前亮着的灯是: 灯${this.currentLampIndex + 1}`)
12.           .fontSize(25)
13.           .fontWeight(FontWeight.Bold)
14.           .fontColor(Color.Blue);
15.       }
17.       // 渲染灯和猫的位置
18.       Row({ space: 10 }) {
19.         ForEach(this.lamps, (index: number) => {
20.           Column() {
21.             // 如果当前灯是猫所在的位置，显示亮灯和猫
22.             if (this.currentLampIndex === index - 1) {
23.               Image($r(`app.media.light_on_${index}`))
24.                 .width(130)
25.                 .height(150)
26.                 .borderRadius(10); // 增加灯的圆角效果
27.               Image($r('app.media.cat'))
28.                 .width(85)
29.                 .height(100)
30.                 .borderRadius(5); // 增加猫的圆角效果
31.             } else {
32.               // 其他位置显示关灯
33.               Image($r(`app.media.light_off_${index}`))
34.                 .width(130)
35.                 .height(150)
36.                 .borderRadius(10)
37.                 .margin(20)
38.             }
39.           }
40.         });
41.       }
43.       // 控制猫移动的按钮
44.       Row({ space: 20 }) {
45.         Button('下一步')
46.           .onClick(() => {
47.             this.moveCatToNextLamp();
48.           })
49.           .fontSize(20)
50.           .backgroundColor(Color.Green)
51.           .fontColor(Color.White);
52.       }
53.       .justifyContent(FlexAlign.Center);
54.     }
55.     .padding(20)
56.     .height('100%')
57.     .width('100%')
58.     .alignItems(HorizontalAlign.Center);
59.   }
61.   private moveCatToNextLamp() {
62.     // 更新当前猫的位置
63.     this.currentLampIndex = (this.currentLampIndex + 1) % this.lamps.length;
64.   }
65. }

复制代码

1. // Index.ets
2. import { CatAndLampPage } from './CatAndLampPage'
4. @Entry
5. @Component
6. struct Index {
7.   build() {
8.     Column() {
9.       CatAndLampPage() // 调用自定义组件
10.     }
11.     .padding(20) // 设置页面内边距
12.   }
13. }

复制代码

  效果示例：用户点击“下一步”按钮时，猫会移动到下一个灯的位置，当前灯亮起并表现猫，其他灯熄灭，文本提示当前亮着的灯。

  

---

四、代码解读

• 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 - 滑动选择器实现

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=283
來源：坚果派
著作权归作者全部。商业转载请接洽作者得到授权，非商业转载请注明出处。

---