「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录天生器

本篇将带你实现一个随机励志语录天生器应用。用户点击按钮后，界面会随机表现一条预设的励志语录。该应用展示了怎样团结数组使用、状态管理和动态更新界面内容的功能，是一个轻量级的互动应用示例。

---

关键词

• UI互动应用
  
• 动态内容更新
  
• 状态管理
  
• 随机天生
  
• 用户交互
  

---

一、功能阐明

随机励志语录天生器应用允许用户通过点击按钮，从预设的励志语录中随机选择一条表现在界面上，提供轻松的互动体验。

---

二、所需组件

• @Entry 和 @Component 装饰器
  
• Column 结构组件
  
• Text 组件用于表现励志语录
  
• Button 组件用于天生随机语录
  
• @State 修饰符用于状态管理
  

---

三、项目结构

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

---

四、代码实现

1. // 文件名：QuoteGeneratorPage.ets
3. @Component
4. export struct QuoteGeneratorPage {
5.   // 预设励志语录数组
6.   private quotes: string[] = [
7.     '不要害怕失败，因为你正在进步。',
8.     '成功是努力和运气的结合。',
9.     '每天进步一点点，成功就在前方。',
10.     '保持专注，你会发现世界的美好。',
11.     '学习使人强大，行动让梦想成真。'
12.   ];
14.   @State currentQuote: string = '点击下方按钮生成随机励志语录！'; // 当前显示的语录
16.   build() {
17.     Column({ space: 20 }) { // 创建垂直布局容器
18.       // 显示当前语录
19.       Text(this.currentQuote)
20.         .fontSize(18)
21.         .fontWeight(FontWeight.Bold)
22.         .textAlign(TextAlign.Center)
23.         .padding(20);
25.       // 励志语录生成按钮
26.       Button('生成随机语录')
27.         .onClick(() => this.generateRandomQuote())
28.         .fontSize(20)
29.         .backgroundColor(Color.Blue)
30.         .fontColor(Color.White)
31.         .width('50%')
32.         .alignSelf(ItemAlign.Center);
34.       // 显示猫咪图片装饰
35.       Image($r('app.media.cat'))
36.         .width(85)
37.         .height(100)
38.         .borderRadius(5)
39.         .alignSelf(ItemAlign.Center);
40.     }
41.     .padding(20)
42.     .width('100%')
43.     .height('100%')
44.     .alignItems(HorizontalAlign.Center);
45.   }
47.   // 随机生成语录的方法
48.   private generateRandomQuote() {
49.     const randomIndex = Math.floor(Math.random() * this.quotes.length);
50.     this.currentQuote = this.quotes[randomIndex];
51.   }
52. }

复制代码

1. // 文件名：Index.ets
3. import { QuoteGeneratorPage } from './QuoteGeneratorPage';
5. @Entry
6. @Component
7. struct Index {
8.   build() {
9.     Column() {
10.       QuoteGeneratorPage() // 调用语录生成器页面
11.     }
12.     .padding(20)
13.   }
14. }

复制代码

  效果示例：用户点击按钮后，界面会表现一条随机励志语录，搭配猫咪图片增长意见意义性。
  

  

---

五、代码解读

• 状态管理：@State currentQuote 生存当前表现的语录，点击按钮时更新状态。
  
• 随机天生：通过 Math.random() 获取数组中的随机索引，实现随机选择语录。
  
• 动态内容更新：状态更新后，界面会实时革新表现新的语录。
  

---

六、优化发起

• 用户自界说语录：允许用户输入自己的语录并生存到本地存储。
  
• 语录分类功能：增长分类筛选功能，如励志、幽默、哲理等。
  
• 动画效果：为新语录表现添加淡入淡出效果，提拔视觉体验。
  

---

七、相干知识点

• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解
  
• 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提示功能实现
  

---

小结

通过本篇教程，你学会了怎样使用数组和状态管理实现动态内容更新，并结实用户交互展示随机语录。此示例简质朴用，为构建类似功能的应用提供了良好的根本。

---

下一篇预报

在下一篇「UI互动应用篇14 - 语音笔墨转录」中，我们将探索怎样团结语音输入功能，实现笔墨的实时转录与编辑。

---

上一篇： 「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果

下一篇： 「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具

---

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

---