当前位置：首页 > article >正文

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

article 2025/1/13 15:57:59

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

关键词

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)
  }
}