概念
ColorPicker 是完整的颜色选取控件：
• SV 面板：饱和度-明度二维选取区域
• 色相条：Hue 滑条选择基础色相
• Alpha：可选透明度通道
• HEX：十六进制颜色输入框
• Palette：预设颜色快速选取
API 速查
| 函数 | 说明 |
|---|---|
int xuiColorPickerCreate(xui_context pCtx, xui_widget* ppW, const xui_color_picker_desc_t* pDesc) | 创建颜色选择器 |
int xuiColorPickerSetColor(xui_widget pW, uint32_t iColor) | 设置颜色（RGBA） |
int xuiColorPickerSetRGBA(xui_widget pW, int iR, int iG, int iB, int iA) | 分量设置 |
int xuiColorPickerGetRGBA(xui_widget pW, int* pR, int* pG, int* pB, int* pA) | 获取分量 |
int xuiColorPickerSetAlphaEnabled(xui_widget pW, int bEnabled) | 启用透明度 |
int xuiColorPickerSetHex(xui_widget pW, const char* sHex) | HEX 设置 |
int xuiColorPickerSetPalette(xui_widget pW, const uint32_t* arrColors, int iCount) | 调色板 |
int xuiColorPickerOpen(xui_widget pW) | 打开弹出面板 |
int xuiColorPickerSetPopupSize(xui_widget pW, float fW, float fH) | 面板尺寸 |
int xuiColorPickerSetChange(xui_widget pW, xui_color_picker_change_proc onChange, void* pUser) | 变更回调 |
编译本章示例
gcc -O2 -I. -o ch166.exe ch166_main.c src\xui_*.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch166.exe示例：主题色选择
xui_color_picker_desc_t desc = { 0 };
xui_widget pPicker;
xuiColorPickerCreate(pCtx, &pPicker, &desc);
// 初始颜色 + 启用透明度
xuiColorPickerSetColor(pPicker, 0x4FD8C2FF);
xuiColorPickerSetAlphaEnabled(pPicker, 1);
// 预设调色板
uint32_t palette[] = {
0xFF6B5EFF, 0xFFB454FF, 0x4FD8C2FF,
0x6C9BFFFF, 0xC792EAFF, 0xFFFFFFFF
};
xuiColorPickerSetPalette(pPicker, palette, 6);
xuiColorPickerSetChange(pPicker, OnColorChange, NULL);
static void OnColorChange(xui_widget pW, uint32_t iColor, void* pUser) {
ApplyThemeColor(iColor);
}完整代码
将以下代码保存为 ch166_main.c，编译后运行即可看到 ColorPicker 颜色选择器效果：
#include "xge.h"
#include "xui.h"
static xui_context g_pCtx;
static void OnColorChange(xui_widget pW, uint32_t iColor, void* pUser) {
(void)pW; (void)pUser;
xgeLogWrite("颜色变更: 0x%08X", iColor);
}
static int onFrame(void* pUser) {
(void)pUser;
xgeClear(0x081114FF);
xui_vec2_t pos; xgeMouseGet(&pos.x, &pos.y);
xuiInputPointerMove(g_pCtx, pos.x, pos.y);
if (xgeMouseDown(XGE_MOUSE_LEFT)) xuiInputPointerDown(g_pCtx, pos.x, pos.y, 0);
else xuiInputPointerUp(g_pCtx, pos.x, pos.y, 0);
xuiUpdate(g_pCtx, xgeGetDelta());
xuiLayout(g_pCtx);
xuiRender(g_pCtx, NULL, NULL, 0);
return XGE_OK;
}
int main(void) {
xge_desc_t d = {0};
d.iWidth = 800; d.iHeight = 600;
d.sTitle = "ch166 - ColorPicker";
d.iFlags = XGE_INIT_VSYNC;
xgeInit(&d);
xuiCreate(&g_pCtx);
/* XGE 官方代理由 xuiProxyXge() 提供 */
xui_proxy_t tXgeProxy = xuiProxyXge();
xuiSetProxy(g_pCtx, &tXgeProxy);
xuiSetViewportSize(g_pCtx, 800, 600);
xui_widget pRoot;
xuiPanelCreate(g_pCtx, &pRoot, NULL);
xuiWidgetSetRect(pRoot, (xui_rect_t){0, 0, 800, 600});
/* 颜色选择器 */
xui_color_picker_desc_t cpDesc = {0};
xui_widget pPicker;
xuiColorPickerCreate(g_pCtx, &pPicker, &cpDesc);
xuiWidgetSetRect(pPicker, (xui_rect_t){300, 150, 220, 220});
xuiColorPickerSetColor(pPicker, 0x4FD8C2FF);
xuiColorPickerSetAlphaEnabled(pPicker, 1);
uint32_t palette[] = {
0xFF6B5EFF, 0xFFB454FF, 0x4FD8C2FF,
0x6C9BFFFF, 0xC792EAFF, 0xFFFFFFFF
};
xuiColorPickerSetPalette(pPicker, palette, 6);
xuiColorPickerSetChange(pPicker, OnColorChange, NULL);
xuiWidgetAddChild(pRoot, pPicker);
xgeRun(onFrame, NULL);
xuiDestroy(g_pCtx);
xgeUnit();
return 0;
}代码讲解
- xuiColorPickerCreate：创建颜色选择器，包含 SV 面板、色相条、HEX 输入。
- SetColor(0x4FD8C2FF)：设置初始颜色为 RGBA 格式。
- SetAlphaEnabled(1)：启用透明度滑条。
- SetPalette：预设 6 色调色板供快速选取。
- OnChange：颜色变更时回调，可实时更新预览。
要点与陷阱
- 颜色格式：uint32_t RGBA，高字节为 R，低字节为 A。
- Alpha：禁用 Alpha 时不显示透明度滑条，GetRGBA 的 A 恒为 255。
- HEX：支持 "#RRGGBB" 和 "#RRGGBBAA" 格式。
- 弹出：默认点击色块打开弹出面板，PopupSize 控制面板大小。
进阶练习
- 取色器联动：ColorPicker 变更实时更新预览区域背景色。
- 最近使用：记录最近 8 次选择颜色作为自定义 Palette。
