Menubars in QtQuick Controls 2

Question

How can I have Menubars in QtQuick Controls 2? It used to be like this (in ApplicationWindow):

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

But after upgrading to Qt 5.7 it gives this error: Invalid property name "menuBar".(M16)

P.S. it used to use device's native menu system, for example on OS X it used native screen's topbar menubar, on Linux and Windows it used native in application topbar menubar, etc.

Answer 1

I just came across this question while dealing with this problem myself. Qt.labs.platform, as mentioned, doesn't work on Windows, and Qt.Quick.Controls 2 doesn't try to implement menus natively on anything. This is unsatisfying if you want actual system-native menus instead of custom QML objects.

The solution I've found is to import QtQuick.Controls 1 and use it just for the main window and menu bar. QML's import syntax makes this easy. For example:

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
}

Now I can use all of modern Qt.Quick.Controls 2's fancy features and improvements, while effortlessly getting a native menu (at the top of the window for Windows, and at the top of the screen for Mac).

Note that for this to work, it's not enough to just declare the MenuBar; it has to be set as the menuBar property of the ApplicationWindow.

Answer 2

I asked the same question on Qt blog announcing release of Qt 5.7 and this is their answer: http://blog.qt.io/blog/2016/06/16/qt-5-7-released/#comment-1197915

So seems that we should either wait for Qt 5.8 or clone the repo as Mitch suggested in his answer.

Update

This is now implemented in Qt Quick Controls 2: https://doc.qt.io/qt-5.10/qml-qtquick-controls2-menubar.html