组件：颜色选择器

颜色选择器组件用于让用户从预定义或自定义的颜色面板中选择颜色，支持设置和获取颜色值（十六进制格式），并可获取 RGB 分量。它基于 HTML <input type="color"> 元素封装，适用于主题设置、样式配置、图表颜色选择等需要颜色选取的场景。

典型使用场景：

  • 主题颜色自定义（网站主题色、品牌色设置）
  • 图表/报表颜色配置（折线图、柱状图颜色）
  • 文本/背景颜色设置（富文本编辑器、设计工具）
  • 表单中的颜色字段（产品颜色、标签颜色）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作属性/方法示例
设置颜色值置颜色(颜色值)颜色选择器1.置颜色("#ff4d4f")
获取当前颜色值（#RRGGBB）取颜色()变量 颜色 = 颜色选择器1.取颜色()
获取 RGB 数组取RGB()变量 rgb = 颜色选择器1.取RGB()
禁用/启用组件禁用颜色选择器1.禁用 = 真
设置颜色选择完成回调置颜色选择完毕回调(回调函数)颜色选择器1.置颜色选择完毕回调((源对象, 颜色值) => { ... })

样式美化参考

颜色选择器的外观可通过继承的视图属性进行调整：

  • 整体容器：通过 宽度、高度、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "6px"）等属性美化。颜色选择器默认显示为一个小方形色块，点击后弹出系统颜色选择面板。
  • 色块样式：色块本身显示当前选中的颜色，其大小和形状由 宽度 和 高度 控制，建议设置为正方形（如 宽度 = 36，高度 = 36）。
  • 禁用状态：禁用 = 真 时，色块变灰且不可点击。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-color-picker {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s;
}
.my-color-picker:hover {
    border-color: #1890ff;
}
.my-color-picker:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

在代码中应用样式类：颜色选择器1.添加样式类("my-color-picker")

基础示例

创建一个颜色选择器，初始颜色为蓝色（#1890ff），选择后输出颜色值。

变量 颜色选择器1 = 创建 颜色选择器()
颜色选择器1.左边 = 50
颜色选择器1.顶边 = 50
颜色选择器1.宽度 = 44
颜色选择器1.高度 = 44
颜色选择器1.边框 = "1px solid #d9d9d9"
颜色选择器1.边框圆角 = "6px"
颜色选择器1.置颜色("#1890ff")

颜色选择器1.置颜色选择完毕回调((源对象, 颜色值) => {
    弹出提示("选择的颜色：" + 颜色值)
})

添加组件(颜色选择器1)

综合示例：主题颜色自定义面板

本示例构建一个主题颜色配置面板，包含颜色选择器、预览区域和颜色值显示，支持多个颜色属性的设置。

' ========== 创建配置面板 ==========
变量 面板 = 创建 绝对布局()
面板.左边 = 30
面板.顶边 = 30
面板.宽度 = 400
面板.高度 = 300
面板.背景颜色 = "#ffffff"
面板.边框 = "1px solid #e8e8e8"
面板.边框圆角 = "12px"
面板.内边距 = "20px"
添加组件(面板)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "🎨 主题颜色设置"
标题.字体大小 = "18px"
标题.字体粗细 = "bold"
标题.内边距 = "0 0 16px 0"
面板.添加组件(标题)

' 主色设置
变量 主色标签 = 创建 标签()
主色标签.文本 = "主色"
主色标签.字体大小 = "14px"
主色标签.文本颜色 = "#666"
主色标签.内边距 = "8px 0 4px"
面板.添加组件(主色标签)

变量 主色选择器 = 创建 颜色选择器()
主色选择器.宽度 = 40
主色选择器.高度 = 40
主色选择器.边框 = "1px solid #d9d9d9"
主色选择器.边框圆角 = "6px"
主色选择器.置颜色("#1890ff")
面板.添加组件(主色选择器)

' 主色值显示
变量 主色值标签 = 创建 标签()
主色值标签.文本 = "#1890ff"
主色值标签.字体大小 = "14px"
主色值标签.文本颜色 = "#333"
主色值标签.内边距 = "8px 0 0"
主色值标签.左边 = 60
主色值标签.顶边 = 58  ' 需要根据实际布局调整，此处简化
面板.添加组件(主色值标签)

' 背景色设置
变量 背景标签 = 创建 标签()
背景标签.文本 = "背景色"
背景标签.字体大小 = "14px"
背景标签.文本颜色 = "#666"
背景标签.内边距 = "12px 0 4px"
面板.添加组件(背景标签)

变量 背景选择器 = 创建 颜色选择器()
背景选择器.宽度 = 40
背景选择器.高度 = 40
背景选择器.边框 = "1px solid #d9d9d9"
背景选择器.边框圆角 = "6px"
背景选择器.置颜色("#f0f0f0")
面板.添加组件(背景选择器)

' 背景色值显示
变量 背景值标签 = 创建 标签()
背景值标签.文本 = "#f0f0f0"
背景值标签.字体大小 = "14px"
背景值标签.文本颜色 = "#333"
背景值标签.内边距 = "8px 0 0"
面板.添加组件(背景值标签)

' 预览区域（演示颜色变化）
变量 预览容器 = 创建 弹性布局()
预览容器.方向 = "row"
预览容器.侧轴对齐 = "center"
预览容器.主轴对齐 = "center"
预览容器.宽度 = 360
预览容器.高度 = 60
预览容器.边框 = "1px solid #e8e8e8"
预览容器.边框圆角 = "6px"
预览容器.内边距 = "12px"
预览容器.背景颜色 = "#f0f0f0"
预览容器.左边 = 0
预览容器.顶边 = 200
面板.添加组件(预览容器)

变量 预览文本 = 创建 标签()
预览文本.文本 = "预览文字"
预览文本.字体大小 = "18px"
预览文本.字体粗细 = "bold"
预览文本.文本颜色 = "#1890ff"
预览容器.添加组件(预览文本)

' ========== 绑定回调事件 ==========
主色选择器.置颜色选择完毕回调((源对象, 颜色值) => {
    主色值标签.文本 = 颜色值
    预览文本.文本颜色 = 颜色值
})

背景选择器.置颜色选择完毕回调((源对象, 颜色值) => {
    背景值标签.文本 = 颜色值
    预览容器.背景颜色 = 颜色值
})

属性详解

颜色

  • 类型： 文本型
  • 说明： 设置或获取当前选中的颜色值，格式为 #RRGGBB（十六进制大写，如 #FF0000）。设置后，色块会同步更新。

禁用

  • 类型： 逻辑型
  • 说明： 设置或获取是否禁用颜色选择器。禁用后，色块不可点击，样式变灰。默认为 假。

函数详解

置颜色(颜色值)

  • 功能： 设置当前颜色值，并更新色块显示。
  • 参数： 颜色值（文本型），格式必须为 #RRGGBB（以 # 开头，后跟6位十六进制字符）。
  • 返回值： 无。
  • 示例： 颜色选择器1.置颜色("#ff4d4f")

取颜色()

  • 功能： 获取当前选中的颜色值。
  • 返回值： 文本型，格式为 #RRGGBB（大写十六进制）。
  • 示例： 变量 当前颜色 = 颜色选择器1.取颜色()

取RGB()

  • 功能： 获取当前颜色的 RGB 分量数组。
  • 返回值： 数组，格式为 [R, G, B]，每个分量范围为 0~255。
  • 示例： 
    变量 rgb = 颜色选择器1.取RGB()
调试输出("红色分量：" + rgb[0])
调试输出("绿色分量：" + rgb[1])
调试输出("蓝色分量：" + rgb[2])

置颜色选择完毕回调(回调函数)

  • 功能： 设置当用户完成颜色选择（点击确定或关闭颜色面板）时的回调函数。
  • 参数： 回调函数，格式为 (源对象, 颜色值) => { ... }。
    • 源对象：颜色选择器组件本身。
    • 颜色值：用户选择的颜色（#RRGGBB 格式）。
  • 返回值： 无。
  • 示例： 
    颜色选择器1.置颜色选择完毕回调((源对象, 颜色值) => {
    调试输出("新颜色：" + 颜色值)
})

事件说明

颜色选择完毕(源对象, 颜色值)

  • 功能： 与 置颜色选择完毕回调 等效，适用于设计文件（.spldg）中定义的组件。
  • 示例： 
    事件 颜色选择器1.颜色选择完毕(源对象, 颜色值)
    调试输出("选择的颜色：" + 颜色值)
结束 事件

⚠️ 注意事项

  1. 颜色格式：所有颜色值必须为 #RRGGBB 格式（6位十六进制），不支持 #RGB 简写或 rgb() 函数。设置非标准格式可能导致显示异常。
  2. 取RGB返回值：取RGB() 返回的数组元素为数值型，可直接用于计算。
  3. 回调触发时机：置颜色选择完毕回调 仅在用户通过颜色面板确认选择时触发。若通过代码 置颜色 修改，不会触发回调。
  4. 禁用状态：禁用 = 真 时，色块不可点击，但通过代码 置颜色 仍可修改值（但视觉上可能不更新？实际上禁用后设置颜色仍然会更新显示，只是不可交互）。
  5. 默认颜色：若未设置初始颜色，浏览器默认为 #000000（黑色）。
  6. 系统颜色面板：颜色选择器调用的是浏览器原生的颜色选择面板，不同操作系统和浏览器界面可能不同，但功能一致。
  7. 样式定制：色块本身是 <input type="color">，其样式受浏览器限制，部分样式（如背景色）可能无法完全自定义，但可通过外层容器美化。
  8. 取值大小写：取颜色() 返回的是大写十六进制（如 #FF0000），与输入时的大小写无关。

相关文档

  • 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
  • 文档其它通用类组件_数字输入框 —— 类似数值输入组件
  • 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、数组操作等
  • 文档综合演示：主题颜色配置 —— 实际应用示例