「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
2024-11-28 21:09:09
30次阅读
0个评论
最后修改时间:2024-11-28 21:26:29
本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择,或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。
关键词
- 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
用于存储当前选定颜色和用户输入的颜色。 - 预设颜色按钮:通过动态生成按钮列表实现多种颜色选择。
- 输入颜色代码验证:通过正则表达式检查用户输入是否合法。
- 动态背景更新:实时根据用户选择的颜色更新背景颜色。
六、优化建议
- 增强交互体验:在用户选择颜色时显示渐变过渡动画。
- 颜色历史记录:保存最近选择的颜色,便于用户快速使用。
- 支持更多格式:扩展输入功能,支持 RGB 或 HSL 格式的颜色代码。
七、相关知识点
小结
通过颜色选择器的实现,用户能够体验状态管理、用户输入验证以及动态界面更新的实现方式。这个应用是一个简单但实用的 UI 交互示例。
下一篇预告
在下一篇「UI互动应用篇12 - 简易日历」中,我们将探索如何创建一个简易日历,显示当前月份的日期,并支持选择特定日期的功能。
上一篇: 「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏
下一篇: 「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
作者:SoraLuna 链接:https://www.nutpi.net 來源:坚果派 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
00
- 0回答
- 1粉丝
- 0关注
相关话题
- 「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
- 「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
- 「Mac畅玩鸿蒙与硬件25」UI互动应用篇2 - 计时器应用实现
- 「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
- 「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
- 「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
- 「Mac畅玩鸿蒙与硬件30」UI互动应用篇7 - 简易计步器
- 「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
- 「Mac畅玩鸿蒙与硬件29」UI互动应用篇6 - 多选问卷小应用
- 「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏
- 「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
- 「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
- 「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用
- 「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目
- 「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用