Skip to content

菜单栏控件 (SMenuBar)

Warning

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

You can read it through google translate.

菜单栏控件提供了应用程序中常见的顶部菜单栏功能，支持多级菜单、快捷键、状态管理等功能。它是实现应用程序菜单系统的重要组件。

基本信息

  • 类名：SMenuBar
  • 控件标签：menubar
  • 基类：SWindow
  • 功能：提供应用程序菜单栏功能

属性说明

基本属性

属性名 类型 默认值 说明
itemWidth int 0 菜单项宽度(0为自动)
itemHeight int 25 菜单项高度
textOffset int 5 文本偏移量
iconBarWidth int 24 图标栏宽度
separatorHeight int 3 分隔线高度

外观属性

属性名 类型 默认值 说明
colorText color 0 文本颜色
colorTextHover color 0 悬停文本颜色
colorTextDisabled color 808080 禁用文本颜色
colorBkgnd color FFFFFF 背景颜色
itemSkin string - 菜单项皮肤
iconSkin string - 图标皮肤

使用示例

基本菜单栏

<menubar name="menuBasic" 
         pos="0,0,-0,30" 
         colorBkgnd="#F0F0F0">
    <item text="文件">
        <item text="新建" 
              hotkey="Ctrl+N"/>
        <item text="打开" 
              hotkey="Ctrl+O"/>
        <sep/>
        <item text="退出"/>
    </item>
    <item text="编辑">
        <item text="剪切" 
              hotkey="Ctrl+X"/>
        <item text="复制" 
              hotkey="Ctrl+C"/>
        <item text="粘贴" 
              hotkey="Ctrl+V"/>
    </item>
</menubar>

带图标的菜单栏

<menubar name="menuIcon" 
         pos="0,0,-0,30" 
         iconSkin="menu_icons">
    <item text="文件" 
          icon="0">
        <item text="新建文件" 
              icon="1"/>
        <item text="新建文件夹" 
              icon="2"/>
        <sep/>
        <item text="打开" 
              icon="3"/>
    </item>
    <item text="编辑" 
          icon="4">
        <item text="撤销" 
              icon="5"/>
        <item text="重做" 
              icon="6"/>
        <sep/>
        <item text="设置" 
              icon="7"/>
    </item>
</menubar>

动态菜单栏

<menubar name="menuDynamic" 
         pos="0,0,-0,30" 
         itemHeight="28"
         colorText="#333333"
         colorTextHover="#1E90FF"/>

菜单操作

代码操作示例

void MenuBarOperations()
{
    SMenuBar *pMenuBar = 
        FindChildByName2<SMenuBar>(L"menuDemo");
    if(pMenuBar) {
        // 添加菜单项
        pugi::xml_node item = pMenuBar->InsertItem(0, 
                                                  L"新菜单");

        // 添加子菜单
        pugi::xml_node subItem = 
            pMenuBar->InsertSubMenu(item, L"子菜单");

        // 添加分隔线
        pMenuBar->InsertSeparator(subItem);

        // 设置菜单项状态
        pMenuBar->EnableItem(0, FALSE);

        // 设置菜单项选中
        pMenuBar->CheckItem(1, TRUE);

        // 删除菜单项
        pMenuBar->DeleteItem(2);
    }
}

动态构建菜单

void BuildDynamicMenu()
{
    SMenuBar *pMenuBar = 
        FindChildByName2<SMenuBar>(L"menuDynamic");
    if(!pMenuBar) return;

    // 清空菜单
    pMenuBar->DeleteAllItems();

    // 构建文件菜单
    pugi::xml_node fileMenu = 
        pMenuBar->InsertItem(-1, L"文件");
    pMenuBar->InsertSubMenu(fileMenu, 
                           L"新建", 
                           0, 
                           L"Ctrl+N");
    pMenuBar->InsertSubMenu(fileMenu, 
                           L"打开", 
                           1, 
                           L"Ctrl+O");

    // 构建最近文件菜单
    pugi::xml_node recentMenu = 
        pMenuBar->InsertSubMenu(fileMenu, L"最近文件");
    vector<SStringT> recentFiles = GetRecentFiles();
    for(auto &file : recentFiles) {
        pMenuBar->InsertSubMenu(recentMenu, file);
    }
}

事件处理

可用事件

  • EventCmd: 菜单命令事件
  • EventMenuHover: 菜单项悬停事件
  • EventMenuExit: 菜单项退出事件

事件处理示例

// 在头文件中声明
EVENT_MAP_BEGIN()
    EVENT_NAME_COMMAND(L"menuDemo", OnMenuCommand)
EVENT_MAP_END()

// 在源文件中实现
void CMainDlg::OnMenuCommand(UINT uNotifyCode, 
                            int nID, 
                            HWND wndCtl)
{
    switch(nID) {
    case ID_FILE_NEW:
        OnFileNew();
        break;
    case ID_FILE_OPEN:
        OnFileOpen();
        break;
    // 处理其他菜单命令
    }
}

样式定制

基本样式

<style>
    <class name="menuStyle"
           itemHeight="28"
           colorText="#333333"
           colorTextHover="#1E90FF"
           colorBkgnd="#FFFFFF"/>
</style>

<menubar class="menuStyle"/>

自定义菜单项模板

<menubar name="menuTemplate">
    <template>
        <window class="menuitem" 
                layout="hbox" 
                padding="5,0,5,0">
            <img name="icon" 
                 size="16,16" 
                 margin="0,0,5,0"
                 display="0"/>
            <text name="text"/>
            <text name="hotkey" 
                  align="right"/>
        </window>
    </template>
</menubar>

最佳实践

  1. 菜单设计
  2. 合理的菜单分组
  3. 清晰的功能层次

  4. 直观的操作方式

  5. 快捷键设计

  6. 符合习惯的快捷键
  7. 避免冲突

  8. 清晰的提示

  9. 状态管理

  10. 及时的状态更新
  11. 合理的禁用逻辑

  12. 清晰的选中状态

  13. 性能优化

  14. 延迟加载子菜单
  15. 动态更新菜单项
  16. 避免过深的层级

常见问题

显示问题

  • 菜单项对齐
  • 图标显示
  • 快捷键显示

交互问题

  • 菜单弹出位置
  • 键盘导航
  • 焦点处理

状态问题

  • 状态同步
  • 动态更新
  • 禁用逻辑

相关主题