本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后，界面背景会随机变化为淡色系颜色，同时显示当前的颜色代码，页面还会展示一只猫咪图片作为装饰，提升趣味性。
关键词
- 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.etsimport { RandomColorPage } from './RandomColorPage';@Entry
@Component
struct Index {build() {Column() {RandomColorPage() // 调用随机颜色页面}.padding(20)}
}
效果示例：用户点击“随机颜色”按钮后，界面背景会切换为一个淡色系颜色，同时显示背景颜色代码，页面中央展示一只可爱的猫咪图片装饰。
五、代码解读
- 状态管理：
@State backgroundColor用于存储当前的背景颜色，每次点击按钮时更新。 - 随机颜色生成：
generateLightColor方法通过生成高范围的 RGB 值，确保颜色保持淡色系。 - 动态背景更新：背景颜色绑定到
backgroundColor状态，实现实时更新界面背景。
六、优化建议
- 保存颜色历史：为用户提供已生成颜色的历史记录，便于参考和选择。
- 预设颜色选择：添加一些固定的淡色系颜色供用户直接选择。
- 动画效果：为颜色切换添加淡入淡出或渐变动画，提升视觉效果。
七、相关知识点
- 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
- 「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
小结
通过随机颜色变化器的实现，你学会了如何动态生成和应用随机颜色，并通过状态管理实时更新界面背景。本应用简单有趣，是探索动态 UI 设计的绝佳切入点。
下一篇预告
在下一篇「UI互动应用篇15 - 猜数字增强版」中，我们将改进数字猜谜游戏，加入计分和记录历史功能，进一步提升用户体验。
上一篇： 「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
下一篇： 「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=326
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
