引言

在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()}}
}

代碼解釋：

1. 使用MouseArea捕獲右鍵點擊事件
2. Menu組件定義了一個上下文菜單
3. MenuItem定義菜單項，可以包含圖標
4. MenuSeparator添加分隔線
5. 通過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()}}}
}

代碼解釋：

1. MenuBar組件創建菜單欄
2. 可以嵌套多個Menu創建子菜單
3. 每個Menu都有標題和菜單項
4. 支持菜單項的事件處理

運行效果：

示例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)}}}
}

代碼解釋：

1. 使用Instantiator動態創建菜單項
2. 通過model提供數據源
3. delegate定義每個菜單項的樣式和行為
4. 支持動態添加和刪除菜單項

運行效果：

示例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}
}

代碼解釋：

1. 使用Action組件定義帶快捷鍵的菜單項
2. shortcut屬性設置快捷鍵
3. 支持標準快捷鍵（如StandardKey.Copy）
4. 可以同時顯示快捷鍵提示

運行效果：

示例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}
}

代碼解釋：

1. checkable屬性使菜單項可選中
2. checked屬性控制選中狀態
3. 使用ButtonGroup管理單選按鈕組
4. 支持嵌套菜單結構

運行效果：

---

總結

本文通過5個具體的示例，展示了QML中菜單控件的常見用法：

1. 上下文菜單：通過右鍵點擊觸發
2. 菜單欄：創建標準的應用程序菜單
3. 動態菜單：根據數據動態生成菜單項
4. 快捷鍵菜單：支持鍵盤快捷鍵操作
5. 可選項菜單：包含復選框和單選按鈕

工程下載

您可以在Gitcode上獲取完整的示例代碼：GitCode QML菜單的常規用法