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

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

关键词

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

一、功能说明

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

二、所需组件

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

三、项目结构

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

四、代码实现

typescript 复制代码

// 文件名：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];
  }
}

typescript 复制代码

// 文件名：Index.ets

import { QuoteGeneratorPage } from './QuoteGeneratorPage';

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

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

五、代码解读

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

六、优化建议

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

七、相关知识点

小结

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

下一篇预告

在下一篇「UI互动应用篇14 - 语音文字转录」中，我们将探索如何结合语音输入功能，实现文字的实时转录与编辑。

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

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

作者：SoraLuna

链接：https://www.nutpi.net/thread?topicId=386

來源：坚果派

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。