分组框控件 (SGroup)¶

Warning

The current page still doesn't have a translation for this language.

You can read it through google translate.

分组框控件用于将相关的控件组织在一个可视的边框内，通常带有标题文本，用于创建有层次感的界面布局。

基本信息¶

类名：SGroup
控件标签：group
基类：SWindow
功能：提供带标题的分组框容器

属性说明¶

基本属性¶

属性名	类型	默认值	说明
text	string	-	text value
align	string	-	水平对齐，可选值：left,center,right
headerHeight	int	-	头部高度

外观属性¶

属性名	类型	默认值	说明
skin	string	-	皮肤
colorLine1	color	-	线条颜色1
colorLine2	color	-	线条颜色2
round	string	-	圆角大小
colorText	color	-	文本颜色
font	string	-	文本字体

布局属性¶

属性名	类型	默认值	说明
margin	string	-	边框大小，和colorBorder或者ncSkin配合使用，格式为左,上,右,下
padding	string	-	内边距，和inset属性相同，格式为左,上,右,下

使用示例¶

基本分组框¶

<group pos="10,10,210,110" 
       name="group_basic"
       text="基本信息">
    <window pos="10,20,190,90">
        <!-- 分组框内的控件 -->
    </window>
</group>

带样式的分组框¶

<group pos="10,120,210,220" 
       name="group_styled"
       text="高级设置"
       align="center"
       round="4"
       colorLine1="#CCCCCC"
       colorLine2="#999999"
       colorText="#333333"
       font="bold:1,size:16">
    <window pos="10,20,190,90">
        <!-- 分组框内的控件 -->
    </window>
</group>

自定义边框的分组框¶

<group pos="220,10,420,150" 
       name="group_bordered"
       text="自定义边框"
       colorLine1="#FF0000"
       colorLine2="#0000FF"
       margin="2,2,2,2">
    <window pos="10,20,190,90">
        <!-- 分组框内的控件 -->
    </window>
</group>

右对齐标题的分组框¶

<group pos="220,160,420,260" 
       name="group_right"
       text="右对齐标题"
       align="right"
       colorText="#666666">
    <window pos="10,20,190,90">
        <!-- 分组框内的控件 -->
    </window>
</group>

事件处理¶

分组框控件支持以下事件：

事件名	EventID	说明
EVT_MOUSE_HOVER	EventMouse::EventID	鼠标悬停事件
EVT_MOUSE_LEAVE	EventMouse::EventID	鼠标离开事件
EVT_SETFOCUS	EventSetFocus::EventID	获得焦点事件
EVT_KILLFOCUS	EventKillFocus::EventID	失去焦点事件

// 事件处理示例
EVENT_MAP_BEGIN()
    EVENT_NAME_HANDLER(L"group_basic", EventMouse::EventID, OnGroupMouseEvent)
EVENT_MAP_END()

void OnGroupMouseEvent(IEvtArgs *pEvt)
{
    // 处理鼠标事件
}

代码操作¶

// 查找分组框控件
SGroup *pGroup = FindChildByName2<SGroup>(L"group_basic");

// 设置标题文本
pGroup->SetWindowText(L"新标题");

// 获取标题文本
SStringT strText = pGroup->GetWindowText();

// 设置文本对齐方式
pGroup->SetAttribute(L"align", L"center");

// 设置圆角大小
pGroup->SetAttribute(L"round", L"8");

// 设置线条颜色
pGroup->SetAttribute(L"colorLine1", L"#FF0000");
pGroup->SetAttribute(L"colorLine2", L"#0000FF");

最佳实践¶

视觉分组：使用分组框将相关的控件组织在一起，提高界面的逻辑性和可读性
标题对齐：根据界面布局选择合适的标题对齐方式
样式统一：通过颜色和字体属性保持分组框样式与整体界面风格一致
间距控制：合理设置子控件与分组框边界的间距，确保布局美观

常见问题¶

Q: 分组框标题显示不完整怎么办？¶

A: 检查 headerHeight 是否足够显示标题文本，或调整字体大小。

Q: 分组框边框显示异常怎么办？¶

A: 确保正确设置了 colorLine1 和 colorLine2 属性。

Q: 子控件位置不正确怎么办？¶

A: 检查子控件的 pos 属性是否相对于分组框正确设置。