QML 菜单控件：MenuBar、MenuBarItem、Menu、MenuItem层级关系和用法

引言

在 GUI 开发中，菜单是用户交互的核心组件。QML 提供了一套灵活的菜单控件（MenuBar、Menu、MenuItem 等），本文将通过代码示例和图解，帮助理解它们的层级关系和用法。

相关阅读

• Qt 官方文档：QML Menu 类型
• 菜单层级图（Mermaid）：

关于MenuBarItem

MenuBarItem 在 MenuBar 中显示 Menu。当通过键盘、鼠标或触摸触发 MenuBarItem 时，将显示相应的下拉菜单。MenuBarItem 用作 MenuBar 的默认代理类型。请注意，在使用 MenuBar 时，无需手动声明 MenuBarItem 实例。将 Menu 实例声明为 MenuBar 的子项就足够了，并且会自动创建相应的项。

简单来说，在实际使用的时候，直接使用Menu即可。

---

核心代码

1. 主菜单栏 (MenuBar.qml)

// MenuBar.qml
import QtQuick
import QtQuick.ControlsMenuBar {Menu {title: "文件"MenuItem { text: "新建"; onTriggered: console.log("新建文件") }MenuItem { text: "打开" }Menu {title: "最近打开"MenuItem { text: "文档1.qml" }MenuItem { text: "项目2.pro" }}}
}

这是一个典型的QML菜单栏(MenuBar)实现,用于创建应用程序的顶部菜单。具体结构如下:

---

2. 主页面，包含右键菜单 (MainPage.qml)

// MainPage.qml
import QtQuick
import QtQuick.ControlsPane {id: rootanchors.fill: parentText {id: mainTextanchors.centerIn: parenttext: "右键点击显示上下文菜单"font.pixelSize: 16}Menu {id: contextMenuMenuItem {text: "复制"onTriggered: console.log("复制被点击")}MenuItem {text: "粘贴"onTriggered: console.log("粘贴被点击")}MenuItem {text: "剪切"onTriggered: console.log("剪切被点击")}MenuSeparator { }MenuItem {text: "刷新"onTriggered: console.log("刷新被点击")}}MouseArea {anchors.fill: parentacceptedButtons: Qt.RightButtononClicked: function(mouseEvent) {if (mouseEvent.button === Qt.RightButton) {contextMenu.popup()}}}
}

MainPage实现了一个带有右键上下文菜单的页面，在页面中心显示提示文本"右键点击显示上下文菜单"。
菜单结构如下：

---

3. 主界面绑定 (Main.qml)

// Main.qml
import QtQuick
import QtQuick.Controls
import "."  // 添加本地目录导入ApplicationWindow {id: windowwidth: 400height: 400visible: truetitle: "QML菜单示例"// 绑定主菜单栏, 引用 MenuBar.qmlmenuBar: MenuBar { }  // 主要内容区域MainPage { }
} 

Main.qml 定义应用程序主窗口，它包含了一个顶部菜单栏（MenuBar.qml）和主要内容区域（MainPage.qml）。

整体结构

---

运行效果

• 主菜单栏点击展开嵌套菜单
• 右键弹出上下文菜单，菜单项点击触发控制台输出

---

总结

通过这个示例，可以清晰看到：MenuBar 作为根容器，Menu 管理层级，MenuItem 作为基础操作项，而 ContextMenu 独立处理右键交互。官方文档提供了以下几种类型：

但实际上，开发者只需要其中3种即可（图中圈出的部分：Menu, MenuBar, MenuItem）

---

工程下载

完整代码已上传 GitHub：GitCode - QML Menu示例