「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器-阿里云开发者社区

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

2024-12-03 50

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

关键词

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

一、功能说明

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

二、所需组件

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

三、项目结构

项目名称：RandomColorApp
自定义组件名称：RandomColorPage
代码文件：RandomColorPage.ets、Index.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)
  }
}