跳转至

分组框控件 (SGroup)

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

基本信息

  • 类名：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");

最佳实践

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

常见问题

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

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

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

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

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

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

相关控件