当前位置：首页 > news >正文

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

news 来源：原创 2025/6/8 23:45:45

引言

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

📚相关阅读

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

🔨BUG修复

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

工程结构

示例详解

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

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

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 400
    height: 300
    color: "lightgray"

    Button {
        text: "右键点击显示菜单"
        anchors.centerIn: parent
        
        MouseArea {
            anchors.fill: parent
            acceptedButtons: Qt.RightButton
            onClicked: contextMenu.popup()
        }
    }

    Menu {
        id: contextMenu
        
        MenuItem {
            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.Layouts

Rectangle {
    width: 400
    height: 300
    color: "lightgray"

    MenuBar {
        width: parent.width

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

Rectangle {
    width: 400
    height: 300
    color: "lightgray"

    Button {
        text: "点击显示动态菜单"
        anchors.centerIn: parent
        onClicked: dynamicMenu.popup()
    }

    Menu {
        id: dynamicMenu
        
        Instantiator {
            model: ["选项1", "选项2", "选项3"]
            delegate: MenuItem {
                text: modelData
                onTriggered: 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.Controls

Rectangle {
    width: 400
    height: 300
    color: "lightgray"

    MenuBar {
        width: parent.width
        
        Menu {
            title: "编辑"
            Action {
                id: copyAction
                text: "复制 (Ctrl+C)"
                icon.source: "icons/copy.png"
                shortcut: StandardKey.Copy
                onTriggered: console.log("复制")
            }
            Action {
                id: cutAction
                text: "剪切 (Ctrl+X)"
                icon.source: "icons/cut.png"
                shortcut: StandardKey.Cut
                onTriggered: console.log("剪切")
            }
        }
    }

    Text {
        anchors.centerIn: parent
        text: "使用快捷键 Ctrl+C 和 Ctrl+X\n触发菜单功能"
        horizontalAlignment: Text.AlignHCenter
    }
}

代码解释：

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

运行效果：

快捷键菜单

示例5：可选项菜单

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

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 400
    height: 300
    color: "lightgray"

    Button {
        text: "设置菜单"
        anchors.centerIn: parent
        onClicked: settingsMenu.popup()
    }

    Menu {
        id: settingsMenu
        title: "设置"

        Action {
            id: autoSaveAction
            text: "自动保存"
            checkable: true
            checked: false
            onTriggered: {
                console.log("自动保存:", checked)
            }
        }

        Menu {
            title: "主题"
            MenuItem {
                text: "浅色"
                checkable: true
                checked: true
                ButtonGroup.group: themeGroup
            }
            MenuItem {
                text: "深色"
                checkable: true
                ButtonGroup.group: themeGroup
            }
        }
    }

    ButtonGroup {
        id: themeGroup
    }
}

代码解释：