「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器

2024-11-30 10:25:16
26次阅读
0个评论
最后修改时间:2024-11-30 10:33:12

本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后,界面背景会随机变化为淡色系颜色,同时显示当前的颜色代码,页面还会展示一只猫咪图片作为装饰,提升趣味性。

20241130_004639.gif


关键词
  • UI互动应用
  • 随机颜色生成
  • 状态管理
  • 用户交互
  • 界面动态更新

一、功能说明

随机颜色变化器应用通过点击按钮生成一个淡色系随机颜色,实时更新界面背景,并显示颜色代码。用户可以在轻松互动中了解随机色彩的效果。


二、所需组件

  • @Entry@Component 装饰器
  • Column 布局组件
  • Text 组件用于显示当前颜色代码
  • Button 组件用于用户交互
  • Image 组件用于装饰
  • @State 修饰符用于状态管理

三、项目结构

  • 项目名称RandomColorApp
  • 自定义组件名称RandomColorPage
  • 代码文件RandomColorPage.etsIndex.ets

四、代码实现

// 文件名:RandomColorPage.ets

@Component
export struct RandomColorPage {
  @State backgroundColor1: string = '#FFFFFF'; // 默认背景颜色为白色

  build() {
    Column({ space: 20 }) { // 创建垂直布局容器
      // 显示当前颜色代码
      Text(`当前背景颜色代码: ${this.backgroundColor1}`)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.Black)
        .alignSelf(ItemAlign.Center);

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

      // 更改颜色按钮
      Button('随机颜色')
        .onClick(() => this.changeBackgroundColor())
        .fontSize(20)
        .backgroundColor(Color.Gray)
        .fontColor(Color.White)
        .width('60%')
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .backgroundColor(this.backgroundColor1) // 动态更新背景颜色
    .alignItems(HorizontalAlign.Center);
  }

  // 随机生成淡色系颜色的方法
  private changeBackgroundColor() {
    const randomColor = this.generateLightColor();
    this.backgroundColor1 = randomColor;
  }

  // 生成淡色系颜色的逻辑
  private generateLightColor(): string {
    const r = Math.floor(Math.random() * 128 + 128); // 保证 R 值在 128-255 范围
    const g = Math.floor(Math.random() * 128 + 128); // 保证 G 值在 128-255 范围
    const b = Math.floor(Math.random() * 128 + 128); // 保证 B 值在 128-255 范围
    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
  }
}
// 文件名:Index.ets

import { RandomColorPage } from './RandomColorPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      RandomColorPage() // 调用随机颜色页面
    }
    .padding(20)
  }
}

效果示例:用户点击“随机颜色”按钮后,界面背景会切换为一个淡色系颜色,同时显示背景颜色代码,页面中央展示一只可爱的猫咪图片装饰。

20241130_004639.gif


五、代码解读

  • 状态管理@State backgroundColor 用于存储当前的背景颜色,每次点击按钮时更新。
  • 随机颜色生成generateLightColor 方法通过生成高范围的 RGB 值,确保颜色保持淡色系。
  • 动态背景更新:背景颜色绑定到 backgroundColor 状态,实现实时更新界面背景。

六、优化建议

  1. 保存颜色历史:为用户提供已生成颜色的历史记录,便于参考和选择。
  2. 预设颜色选择:添加一些固定的淡色系颜色供用户直接选择。
  3. 动画效果:为颜色切换添加淡入淡出或渐变动画,提升视觉效果。

七、相关知识点


小结

通过随机颜色变化器的实现,你学会了如何动态生成和应用随机颜色,并通过状态管理实时更新界面背景。本应用简单有趣,是探索动态 UI 设计的绝佳切入点。


下一篇预告

在下一篇「UI互动应用篇15 - 猜数字增强版」中,我们将改进数字猜谜游戏,加入计分和记录历史功能,进一步提升用户体验。


上一篇: 「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器

下一篇: 「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版


作者:SoraLuna 链接:https://www.nutpi.net 來源:坚果派 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


收藏00

登录 后评论。没有帐号? 注册 一个。