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

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

关键词

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

一、功能说明

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

二、所需组件

• @Entry 和 @Component 装饰器
• Column 布局组件
• Text 组件用于显示励志语录
• Button 组件用于生成随机语录
• @State 修饰符用于状态管理

三、项目结构

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

四、代码实现

// 文件名：QuoteGeneratorPage.ets

@Component
export struct QuoteGeneratorPage {
  // 预设励志语录数组
  private quotes: string[] = [
    '不要害怕失败，因为你正在进步。',
    '成功是努力和运气的结合。',
    '每天进步一点点，成功就在前方。',
    '保持专注，你会发现世界的美好。',
    '学习使人强大，行动让梦想成真。'
  ];

  @State currentQuote: string = '点击下方按钮生成随机励志语录！'; // 当前显示的语录

  build() {
    Column({ space: 20 }) { // 创建垂直布局容器
      // 显示当前语录
      Text(this.currentQuote)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
        .padding(20);

      // 励志语录生成按钮
      Button('生成随机语录')
        .onClick(() => this.generateRandomQuote())
        .fontSize(20)
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .width('50%')
        .alignSelf(ItemAlign.Center);

      // 显示猫咪图片装饰
      Image($r('app.media.cat'))
        .width(85)
        .height(100)
        .borderRadius(5)
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  // 随机生成语录的方法
  private generateRandomQuote() {
    const randomIndex = Math.floor(Math.random() * this.quotes.length);
    this.currentQuote = this.quotes[randomIndex];
  }
}

// 文件名：Index.ets

import { QuoteGeneratorPage } from './QuoteGeneratorPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      QuoteGeneratorPage() // 调用语录生成器页面
    }
    .padding(20)
  }
}

效果示例：用户点击按钮后，界面会显示一条随机励志语录，搭配猫咪图片增添趣味性。

五、代码解读

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

六、优化建议

1. 用户自定义语录：允许用户输入自己的语录并保存到本地存储。
2. 语录分类功能：增加分类筛选功能，如励志、幽默、哲理等。
3. 动画效果：为新语录显示添加淡入淡出效果，提升视觉体验。

七、相关知识点

• 「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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。