QtQuick Controls 2 中的菜單欄

Question

如何在 QtQuick Controls 2 中擁有菜單欄？ 它曾經是這樣的（在 ApplicationWindow 中）：

menuBar: MenuBar {
    Menu {
        title: qsTr('File')
        MenuItem {
            text: qsTr('&Test')
            onTriggered: console.log('test')
        }
        MenuItem {
            text: qsTr('&Exit')
            onTriggered: Qt.quit();
        }
    }
}

但是升級到 Qt 5.7 后，它給出了這個錯誤： Invalid property name "menuBar".(M16)

PS它曾經使用設備的原生菜單系統，例如在OS X上它使用原生屏幕的頂部菜單欄，在Linux和Windows上它在應用程序頂部菜單欄中使用原生等。

Answer 1

MenuBar現在可用，並且是在 Qt 5.10 中添加的。 使用 QtQuick.Controls 2.3 或更高版本：

import QtQuick.Controls 2.3

---

舊答案：

正如 GrecKo 所說，桌面不是模塊的重點，因此，您不會在主要導入中找到MenuBar控件。 直到最近，我一直在使用包含一堆ToolButton控件的RowLayout ，每個控件都打開一個Menu ，以便模擬桌面應用程序的菜單欄。

但是，最近添加了Qt.labs.platform模塊，它增加了對MenuBar等本機控件的支持。 此模塊中的類型是完全原生的，但可定制性較低。 如果你克隆qtquickcontrols2.git的 dev 分支，你已經可以開始使用這些了。

順便說一句，如果您不確定在Qt Quick的同等類型的控件2是什么，有一個“類型比較表” 在這里（雖然它的不幸丟失當前MenuBar ）。

Answer 2

我在宣布發布 Qt 5.7 的 Qt 博客上問了同樣的問題，這是他們的答案： http : //blog.qt.io/blog/2016/06/16/qt-5-7-released/#comment-1197915

所以似乎我們應該等待 Qt 5.8 或按照 Mitch 在他的回答中建議的那樣克隆 repo。

更新

這現在在 Qt Quick Controls 2 中實現： https : //doc.qt.io/qt-5.10/qml-qtquick-controls2-menubar.html

Answer 3

Qt Quick Controls 2 的ApplicationWindow沒有menuBar屬性，它已被一個更可定制的header屬性取代，它接受Item （但它不再接受MenuBar ）。

Qt Quick Controls 2 並非旨在提供本機桌面應用程序，而是旨在提供簡單、高效和可定制的組件。 例如，在 QQC2 中，您將使用ToolBar或TabBar作為ApplicationWindow的header 。

雖然它沒有記錄，但似乎只是將MenuBar作為ApplicationWindow的子項（在 QQC1 和 QQC2 中）設置了 OS X 上的本機菜單欄（但不是在 Android 上，我還沒有在其他平台上測試過） .

Answer 4

此功能已在 Qt 5.10 中為 Controls2 引入。 界面非常相似，只是 MenuItems 已被更通用的 Action 取代。

文檔在這里。

我意識到這是一個老問題，但這對於像我這樣的路人來說可能仍然相關。

Answer 5

我剛剛在自己處理這個問題時遇到了這個問題。 Qt.labs.platform ， Qt.labs.platform不適用於 Windows，並且Qt.Quick.Controls 2不會嘗試在任何東西上本地實現菜單。 如果您想要實際的系統本機菜單而不是自定義 QML 對象，這並不令人滿意。

我找到的解決方案是導入QtQuick.Controls 1並將其僅用於主窗口和菜單欄。 QML 的導入語法使這變得容易。 例如：

import QtQuick.Controls 2.12
import QtQuick.Controls 1.2 as OldControls

OldControls.ApplicationWindow {
    visible: true
    
    menuBar: OldControls.MenuBar { // Should attach natively
        OldControls.Menu {
            title: 'File'
            OldControls.MenuItem {
                text: 'New'
                shortcut: StandardKey.New
                onTriggered: context.new()
            }
        }
    }
    
    Button { ... } // QtQuick.Controls 2 version
}

現在我可以使用所有現代Qt.Quick.Controls 2的奇特功能和改進，同時輕松獲得本機菜單（Windows 窗口頂部，Mac 屏幕頂部）。

請注意，要使其正常工作，僅聲明MenuBar不夠的； 它必須設置為ApplicationWindow的menuBar屬性。