颜色选择器组件

颜色选择器组件用于选择颜色，支持多种颜色格式和透明度调节。

颜色选择器 (ColourChooser)

基本用法

gui_config.add_argument(
    "--color",
    metavar="颜色选择器",
    help="选择颜色",
    default="#409EFF",
    widget="ColourChooser",
    gooey_options={
        "showAlpha": True,  # 是否支持透明度选择
        "colorFormat": "hex",  # 颜色格式 hex/rgb/hsl
        "predefine": ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"],  # 预定义颜色
        "size": "large",  # 大小
        "disabled": False  # 是否禁用
    }
)

属性

属性名	说明	类型	默认值
showAlpha	是否支持透明度选择	boolean	true
colorFormat	颜色格式	string	'hex'
predefine	预定义颜色	array	-
size	颜色选择器大小	string	'default'
disabled	是否禁用	boolean	false

颜色格式 (colorFormat)

颜色选择器支持三种颜色格式：

格式	说明	例子
hex	十六进制颜色码	#409EFF
rgb	RGB颜色值	rgb(64, 158, 255)
hsl	HSL颜色值	hsl(210, 100%, 62%)

带透明度的颜色格式

当 showAlpha 设置为 true 时，颜色格式会包含透明度信息：

格式	带透明度的例子
hex	#409EFF80
rgb	rgba(64, 158, 255, 0.5)
hsl	hsla(210, 100%, 62%, 0.5)

预定义颜色

预定义颜色是一组常用的颜色选项，可以通过 predefine 属性设置。用户可以直接点击这些颜色进行快速选择，无需使用颜色选择器面板。

# 预定义常用的颜色
predefine_colors = [
    "#409EFF",  # 主色调
    "#67C23A",  # 成功
    "#E6A23C",  # 警告
    "#F56C6C",  # 错误
    "#909399"   # 信息
]

# 在组件中使用预定义颜色
gui_config.add_argument(
    "--theme-color",
    metavar="主题颜色",
    help="选择应用主题颜色",
    default="#409EFF",
    widget="ColourChooser",
    gooey_options={
        "predefine": predefine_colors,
        "colorFormat": "hex"
    }
)

使用场景

颜色选择器适用于需要用户选择颜色的场景，例如：

• 自定义应用主题颜色
• 设置图表、图形的颜色
• 选择文本颜色、背景颜色
• 设计工具中的颜色选择
• 个性化界面配置

最佳实践

1. 提供默认颜色：始终为颜色选择器设置合理的默认颜色值，避免初始状态为空
2. 明确颜色用途：在帮助文本中清晰说明颜色的用途，例如"选择文本颜色"
3. 提供预定义颜色：对于特定场景，提供一组预定义的常用颜色，方便用户快速选择
4. 选择合适的颜色格式：根据应用需求选择合适的颜色格式，例如Web开发通常使用hex格式
5. 透明度选择：如果应用场景需要透明度，确保 showAlpha 设置为 true

颜色值处理

在后端处理颜色值时，需要根据 colorFormat 解析不同格式的颜色：

def parse_color(color_value, color_format="hex"):
    """解析不同格式的颜色值"""
    if color_format == "hex":
        # 处理十六进制颜色值
        # 例如: #409EFF 或 #409EFF80
        return color_value
    elif color_format == "rgb":
        # 处理RGB颜色值
        # 例如: rgb(64, 158, 255) 或 rgba(64, 158, 255, 0.5)
        return color_value
    elif color_format == "hsl":
        # 处理HSL颜色值
        # 例如: hsl(210, 100%, 62%) 或 hsla(210, 100%, 62%, 0.5)
        return color_value
    else:
        # 默认返回原始值
        return color_value

示例：主题色设置

# 主题色设置示例
gui_config.add_argument_group("主题设置", gooey_options={"show_border": True})

gui_config.add_argument(
    "--primary-color",
    metavar="主色调",
    help="设置应用主色调",
    default="#409EFF",
    widget="ColourChooser",
    gooey_options={
        "showAlpha": False,
        "colorFormat": "hex",
        "predefine": ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"]
    }
)

gui_config.add_argument(
    "--secondary-color",
    metavar="次要颜色",
    help="设置应用次要颜色",
    default="#67C23A",
    widget="ColourChooser",
    gooey_options={
        "showAlpha": False,
        "colorFormat": "hex",
        "predefine": ["#409EFF", "#67C23A", "#E6A23C", "#F56C6C", "#909399"]
    }
)