Use MenuBar component in a QQuickView on Windows - windows

Question

I am building a QML application that must work on Windows and Mac OS X. I want to manage the menus in QML so I started using the MenuBar component in my application. I am using a QQuickView in C++ to display my QML elements. My menus appear properly on Mac OS X but I get nothing displayed on Windows and no errors in the logs.
The documentation speaks about this component being linked to ApplicationWindow but as it was working fine on Mac OS I was hoping it would work the same anywhere.
Is there a way to fix this on Windows ?

Answer 1

It seems that QQuickView is not able to contain ApplicationWindow as a root object.
Have you tried to use QQmlApplicationEngine instead of QQuickView?
#include <QtGui/QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine("qml/untitled/main.qml");
QObject* root = engine.rootObjects().at(0);
static_cast<QWindow*>(root)->show();
return app.exec();
}
I faced with the same issue on Windows, and it helped me.

Answer 2

I had a look at the way this is done in the QML ApplicationWindow component and found a way to display my menu on Windows. The idea/hack is to use the property __contentItem of the MenuBar component and attach it to the root element. I also do this only if the menu is not native so that it works as it did before on Mac OS X.
TopMenu.qml
import QtQuick 2.1
import QtQuick.Controls 1.0
MenuBar {
Menu {
title: "Window"
MenuItem {
text: "SubMenu3"
shortcut: "Ctrl+s"
}
MenuItem {
text: "SubMenu2"
shortcut: "Ctrl+p"
}
MenuItem {
text: "Preferences"
shortcut: "Ctrl+,"
}
}
}
RootElement.qml
import QtQuick 2.1
Rectangle {
id: rootWindow
width: 400
height: 400
Item {
id: menuWrapper
anchors.fill: parent
TopMenu {
id: myTopMenu
}
states: State {
name: "hasMenuBar"
when: myTopMenu && !myTopMenu.__isNative
ParentChange {
target: myTopMenu.__contentItem
parent: rootWindow
}
PropertyChanges {
target: myTopMenu.__contentItem
x: 0
y: 0
width: menuWrapper.width
}
}
}
}