QML菜单控件：菜单的常规用法

引言

在Qt Quick应用程序开发中，菜单是一个非常重要的用户界面组件。它可以帮助我们组织和管理应用程序的功能，提供更好的用户体验。本文将介绍QML中菜单控件的几种常见用法，通过5个具体的示例来展示如何实现不同类型的菜单。

📚相关阅读

Qt官方文档：Menu
QML菜单控件: 构建统一的菜单样式
QML 菜单控件：MenuBar、MenuBarItem、Menu、MenuItem层级关系和用法

🔨BUG修复

解决示例5 check状态失效的问题

工程结构

示例详解

示例1：上下文菜单（ContextMenu）

这个示例展示了如何创建一个右键点击触发的上下文菜单。

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 300color: "lightgray"Button {text: "右键点击显示菜单"anchors.centerIn: parentMouseArea {anchors.fill: parentacceptedButtons: Qt.RightButtononClicked: contextMenu.popup()}}Menu {id: contextMenuMenuItem {text: "复制"icon.source: "icons/copy.png"onTriggered: console.log("复制被点击")}MenuItem {text: "剪切"icon.source: "icons/cut.png"onTriggered: console.log("剪切被点击")}MenuSeparator { }MenuItem {text: "退出"onTriggered: Qt.quit()}}
}

代码解释：

使用MouseArea捕获右键点击事件
Menu组件定义了一个上下文菜单
MenuItem定义菜单项，可以包含图标
MenuSeparator添加分隔线
通过popup()方法显示菜单

运行效果：

上下文菜单

示例2：菜单栏（MenuBar）

这个示例展示了如何创建一个标准的菜单栏。

import QtQuick
import QtQuick.Controls
import QtQuick.LayoutsRectangle {width: 400height: 300color: "lightgray"MenuBar {width: parent.widthMenu {title: "文件"MenuItem {text: "新建"onTriggered: console.log("新建文件")}Menu {title: "最近打开"MenuItem { text: "文档1" }MenuItem { text: "文档2" }}MenuSeparator { }MenuItem {text: "退出"onTriggered: Qt.quit()}}}
}

代码解释：

MenuBar组件创建菜单栏
可以嵌套多个Menu创建子菜单
每个Menu都有标题和菜单项
支持菜单项的事件处理

运行效果：

菜单栏

示例3：动态菜单

这个示例展示了如何动态生成菜单项。

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 300color: "lightgray"Button {text: "点击显示动态菜单"anchors.centerIn: parentonClicked: dynamicMenu.popup()}Menu {id: dynamicMenuInstantiator {model: ["选项1", "选项2", "选项3"]delegate: MenuItem {text: modelDataonTriggered: console.log("选择了:", modelData)}onObjectAdded: function(index, object) {dynamicMenu.insertItem(index, object)}onObjectRemoved: function(index, object) {dynamicMenu.removeItem(object)}}}
}

代码解释：

使用Instantiator动态创建菜单项
通过model提供数据源
delegate定义每个菜单项的样式和行为
支持动态添加和删除菜单项

运行效果：

动态菜单

示例4：快捷键菜单

这个示例展示了如何创建支持快捷键的菜单。

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 300color: "lightgray"MenuBar {width: parent.widthMenu {title: "编辑"Action {id: copyActiontext: "复制 (Ctrl+C)"icon.source: "icons/copy.png"shortcut: StandardKey.CopyonTriggered: console.log("复制")}Action {id: cutActiontext: "剪切 (Ctrl+X)"icon.source: "icons/cut.png"shortcut: StandardKey.CutonTriggered: console.log("剪切")}}}Text {anchors.centerIn: parenttext: "使用快捷键 Ctrl+C 和 Ctrl+X\n触发菜单功能"horizontalAlignment: Text.AlignHCenter}
}

代码解释：

使用Action组件定义带快捷键的菜单项
shortcut属性设置快捷键
支持标准快捷键（如StandardKey.Copy）
可以同时显示快捷键提示

运行效果：

快捷键菜单

示例5：可选项菜单

这个示例展示了如何创建包含复选框和单选按钮的菜单。

import QtQuick
import QtQuick.ControlsRectangle {width: 400height: 300color: "lightgray"Button {text: "设置菜单"anchors.centerIn: parentonClicked: settingsMenu.popup()}Menu {id: settingsMenutitle: "设置"Action {id: autoSaveActiontext: "自动保存"checkable: truechecked: falseonTriggered: {console.log("自动保存:", checked)}}Menu {title: "主题"MenuItem {text: "浅色"checkable: truechecked: trueButtonGroup.group: themeGroup}MenuItem {text: "深色"checkable: trueButtonGroup.group: themeGroup}}}ButtonGroup {id: themeGroup}
}

代码解释：