「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.ets

import { ColorPickerPage } from './ColorPickerPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      ColorPickerPage() // 调用颜色选择器页面
    }
    .padding(20)
  }
}

效果示例：用户可以通过点击预设颜色按钮或输入颜色代码动态更改界面背景色。
示例中，选择绿色背景后，界面动态更新。

五、代码解读

• 状态管理：@State selectedColor 和 @State customColor 用于存储当前选定颜色和用户输入的颜色。
• 预设颜色按钮：通过动态生成按钮列表实现多种颜色选择。
• 输入颜色代码验证：通过正则表达式检查用户输入是否合法。
• 动态背景更新：实时根据用户选择的颜色更新背景颜色。

六、优化建议

1. 增强交互体验：在用户选择颜色时显示渐变过渡动画。
2. 颜色历史记录：保存最近选择的颜色，便于用户快速使用。
3. 支持更多格式：扩展输入功能，支持 RGB 或 HSL 格式的颜色代码。

七、相关知识点

• 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
• 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

小结

通过颜色选择器的实现，用户能够体验状态管理、用户输入验证以及动态界面更新的实现方式。这个应用是一个简单但实用的 UI 交互示例。

下一篇预告

在下一篇「UI互动应用篇12 - 简易日历」中，我们将探索如何创建一个简易日历，显示当前月份的日期，并支持选择特定日期的功能。

上一篇： 「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏

下一篇： 「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历

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