概念
Separator 用于视觉分组：
• Orientation：水平线或垂直线
• Thickness：线条粗细（像素）
• LineStyle：实线 / 虚线 / 点线
• Align：在容器中的对齐位置
• 常用于菜单分组、表单分区、工具栏分隔
API 速查
| 函数 | 说明 |
|---|---|
int xuiSeparatorCreate(xui_context pCtx, xui_widget* ppW, const xui_separator_desc_t* pDesc) | 创建分隔线 |
int xuiSeparatorSetColor(xui_widget pW, uint32_t iColor) | 设置颜色 |
uint32_t xuiSeparatorGetColor(xui_widget pW) | 获取颜色 |
int xuiSeparatorSetThickness(xui_widget pW, float fThickness) | 线条粗细 |
float xuiSeparatorGetThickness(xui_widget pW) | 获取粗细 |
int xuiSeparatorSetOrientation(xui_widget pW, int iOrientation) | 方向 (0=水平 1=垂直) |
int xuiSeparatorGetOrientation(xui_widget pW) | 获取方向 |
int xuiSeparatorSetAlign(xui_widget pW, int iAlign) | 对齐方式 |
int xuiSeparatorSetLineStyle(xui_widget pW, int iStyle) | 线型 (0=实 1=虚 2=点) |
xui_rect_t xuiSeparatorGetLineRect(xui_widget pW) | 实际线条区域 |
编译本章示例
gcc -O2 -I. -o ch142.exe ch142_main.c src\xui_*.c build\xge.lib -lm -lws2_32 -liphlpapi -lgdi32 -luser32 -lshell32 -lopengl32 -lole32 -lwinmm -lavrt
.\ch142.exe示例：表单分区
// 水平分隔线
xui_separator_desc_t hDesc = { 0 };
xui_widget pHLine;
xuiSeparatorCreate(pCtx, &pHLine, &hDesc);
xuiSeparatorSetOrientation(pHLine, 0); // 水平
xuiSeparatorSetThickness(pHLine, 1.0f);
xuiSeparatorSetColor(pHLine, 0xFF374151);
// 垂直分隔线（工具栏按钮间）
xui_widget pVLine;
xuiSeparatorCreate(pCtx, &pVLine, NULL);
xuiSeparatorSetOrientation(pVLine, 1); // 垂直
xuiSeparatorSetThickness(pVLine, 1.0f);
xuiSeparatorSetColor(pVLine, 0x40FFFFFF);
// 虚线分隔
xui_widget pDash;
xuiSeparatorCreate(pCtx, &pDash, NULL);
xuiSeparatorSetLineStyle(pDash, 1); // 虚线
xuiSeparatorSetThickness(pDash, 2.0f);
// 插入到 Column 布局中
xuiWidgetAddChild(pForm, pSection1);
xuiWidgetAddChild(pForm, pHLine);
xuiWidgetAddChild(pForm, pSection2);完整代码
将以下代码保存为 ch142_main.c，编译后运行即可看到分隔线效果：
#include "xge.h"
#include "xui.h"
static xui_context g_pCtx;
static int onFrame(void* pUser) {
(void)pUser;
xgeClear(0x081114FF);
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 = "ch142 - Separator";
d.iFlags = XGE_INIT_VSYNC;
xgeInit(&d);
xuiCreate(&g_pCtx);
extern const xui_proxy_t tXgeProxy;
xui_proxy_t tXgeProxy = xuiProxyXge();
xuiSetProxy(g_pCtx, &tXgeProxy);
xuiSetViewportSize(g_pCtx, 800, 600);
/* 根容器 Column */
xui_widget pRoot;
xuiWidgetCreate(g_pCtx, &pRoot);
xuiWidgetSetLayoutType(pRoot, XUI_LAYOUT_COLUMN);
xuiWidgetSetRect(pRoot, (xui_rect_t){0, 0, 800, 600});
xuiWidgetSetPadding(pRoot, 40, 40, 40, 40);
/* 间距：用内联样式或子控件布局参数设置 */
xuiSetRootWidget(g_pCtx, pRoot);
/* 标题标签 */
xui_label_desc_t lb1 = { 0 };
lb1.sText = "基本信息";
xui_widget pLb1;
xuiLabelCreate(g_pCtx, &pLb1, &lb1);
xuiWidgetAddChild(pRoot, pLb1);
/* 水平实线分隔 */
xui_separator_desc_t sep1 = { 0 };
xui_widget pSep1;
xuiSeparatorCreate(g_pCtx, &pSep1, &sep1);
xuiSeparatorSetOrientation(pSep1, 0);
xuiSeparatorSetThickness(pSep1, 1.0f);
xuiSeparatorSetColor(pSep1, 0xFF374151);
xuiWidgetAddChild(pRoot, pSep1);
/* 第二段内容 */
xui_label_desc_t lb2 = { 0 };
lb2.sText = "安全设置";
xui_widget pLb2;
xuiLabelCreate(g_pCtx, &pLb2, &lb2);
xuiWidgetAddChild(pRoot, pLb2);
/* 虚线分隔 */
xui_separator_desc_t sep2 = { 0 };
xui_widget pSep2;
xuiSeparatorCreate(g_pCtx, &pSep2, &sep2);
xuiSeparatorSetLineStyle(pSep2, 1); // 虚线
xuiSeparatorSetThickness(pSep2, 2.0f);
xuiSeparatorSetColor(pSep2, 0x40FFFFFF);
xuiWidgetAddChild(pRoot, pSep2);
/* 第三段内容 */
xui_label_desc_t lb3 = { 0 };
lb3.sText = "高级选项";
xui_widget pLb3;
xuiLabelCreate(g_pCtx, &pLb3, &lb3);
xuiWidgetAddChild(pRoot, pLb3);
xgeRun(onFrame, NULL);
xuiDestroy(g_pCtx);
xgeUnit();
return 0;
}代码讲解
- Column 布局：用垂直列容器承载标签和分隔线，自动排列。
- 水平实线：Orientation=0 占满容器宽度，Thickness=1 细线分区。
- 虚线样式：LineStyle=1 设置虚线，配合半透明颜色做视觉弱化。
- 表单分区：标签 + 分隔线交替插入，实现清晰的表单分组效果。
要点与陷阱
- Orientation：0=水平（占满宽度），1=垂直（占满高度）。
- Thickness：水平时为高度，垂直时为宽度。
- LineStyle：0=实线，1=虚线，2=点线。
- 布局：在 Row/Column 中自动适应方向。
进阶练习
- 菜单分隔：在 Menu 项之间插入水平 Separator。
- 带文字分隔线：Row 布局 = 线 + Label + 线。
