「Mac畅玩鸿蒙与硬件34」UI互动应用篇11

「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器

本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择，或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。

关键词

UI互动应用
颜色选择器
状态管理
用户输入
界面动态更新

一、功能说明

颜色选择器应用允许用户选择一个颜色，并实时将其应用到界面背景中。用户既可以从预设颜色中选择，也可以输入颜色代码进行自定义。

二、所需组件

@Entry 和 @Component 装饰器
Column 布局组件
TextInput 组件用于用户输入自定义颜色代码
Text 组件用于显示提示信息
Button 组件用于选择预设颜色
Image 组件用于装饰界面
@State 修饰符用于状态管理

三、项目结构

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

四、代码实现

// 文件名：ColorPickerPage.ets@Component
export struct ColorPickerPage {@State selectedColor: string = '#FFFFFF'; // 默认背景色为白色@State customColor: string = ''; // 用户输入的自定义颜色build() {Column({ space: 20 }) {// 显示当前背景色Text(`当前背景色: ${this.selectedColor}`).fontSize(18).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);// 显示猫咪图片Image($r('app.media.cat')).width(85).height(100).borderRadius(5).alignSelf(ItemAlign.Center);// 预设颜色选择器Column({ space: 10 }) {Button('选择 #FF5733').backgroundColor('#FF5733').fontColor(Color.White).onClick(() => this.selectedColor = '#FF5733').width('80%').alignSelf(ItemAlign.Center);Button('选择 #33FF57').backgroundColor('#33FF57').fontColor(Color.White).onClick(() => this.selectedColor = '#33FF57').width('80%').alignSelf(ItemAlign.Center);Button('选择 #3357FF').backgroundColor('#3357FF').fontColor(Color.White).onClick(() => this.selectedColor = '#3357FF').width('80%').alignSelf(ItemAlign.Center);Button('选择 #F1C40F').backgroundColor('#F1C40F').fontColor(Color.White).onClick(() => this.selectedColor = '#F1C40F').width('80%').alignSelf(ItemAlign.Center);}// 用户输入颜色代码TextInput({ placeholder: '输入自定义颜色代码 (如 #123ABC)' }).type(InputType.Normal) // 正确的输入类型.onChange((value: string) => this.customColor = value).width('80%').alignSelf(ItemAlign.Center);// 应用自定义颜色Button('应用自定义颜色').onClick(() => {if (this.validateColor(this.customColor)) {this.selectedColor = this.customColor;} else {this.selectedColor = '#FFFFFF'; // 无效时回退为白色}}).fontSize(18).backgroundColor(Color.Gray).fontColor(Color.White).width('50%').alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%').backgroundColor(this.selectedColor).alignItems(HorizontalAlign.Center);}// 验证颜色代码是否合法private validateColor(color: string): boolean {const hexColorPattern = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/;return hexColorPattern.test(color);}
}

// 文件名：Index.etsimport { ColorPickerPage } from './ColorPickerPage';@Entry
@Component
struct Index {build() {Column() {ColorPickerPage() // 调用颜色选择器页面}.padding(20)}
}