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.Controls

MenuBar {
    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.Controls

Pane {
    id: root
    anchors.fill: parent

    Text {
        id: mainText
        anchors.centerIn: parent
        text: "右键点击显示上下文菜单"
        font.pixelSize: 16
    }

    Menu {
        id: contextMenu
        
        MenuItem {
            text: "复制"
            onTriggered: console.log("复制被点击")
        }
        MenuItem {
            text: "粘贴"
            onTriggered: console.log("粘贴被点击")
        }
        MenuItem {
            text: "剪切"
            onTriggered: console.log("剪切被点击")
        }
        MenuSeparator { }
        MenuItem {
            text: "刷新"
            onTriggered: console.log("刷新被点击")
        }
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked: function(mouseEvent) {
            if (mouseEvent.button === Qt.RightButton) {
                contextMenu.popup()
            }
        }
    }
}

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

---

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

// Main.qml
import QtQuick
import QtQuick.Controls
import "."  // 添加本地目录导入

ApplicationWindow {
    id: window
    width: 400
    height: 400
    visible: true
    title: "QML菜单示例"

    // 绑定主菜单栏, 引用 MenuBar.qml
    menuBar: MenuBar { }  

    // 主要内容区域
    MainPage { }
} 

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

整体结构

---

运行效果

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

---

总结

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

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

---

工程下载

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