How does style work for the qml type Menu

dauuser

Hello,
I really have no clue how to style a qml Menu. Every time I try to set "style", qt creator says: Cannot assign to non-existent property "style". But when I take a look at the official documentation (http://doc.qt.io/qt-5/qml-qtquick-controls-menu.html) I can see it's possible to use the style component. What am I doing wrong?

source code:

import QtQuick 2.5
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.0
import "components"

            Menu{
                id: settingsMenu                
                transformOrigin: Menu.TopRight;
                style: //nothing will work here

                MenuItem{
                    text: mainServer.displayName + "\\" + mainServer.userName
                    onTriggered: cityDibsServer.logOutRequest()
                }
                MenuItem{
                    text: "Settings"
                    onTriggered: pageLoader.loadPage(settingsPageComponent)
                }

Using QtCreator 4.0.2 for Ubuntu

Any help would be much appreciated! :)

Julien B

Hello @dauuser ,

Your problem look similar to this one QML ProgressBar Qt 5.7 has no style and color property.

There is a difference between Qt Quick Control 1.4 and Quick Controls 2.0, but I must admit it is not easy access to Quick Controls 2.0 documentation at the very beginning.

Anyway style is no more supported with Quick Controls 2.0. You should have a look in Menu QML Type (2.0) and Customizing Menu (2.0) for an example.

dauuser

thank you so much, I really have to double check this in the future!

dauuser

Okay so now I ran into another problem. if I customize the background now with a Rectangle, the menu will not open.

background: Rectangle{
                    implicitWidth: parent.width
                    implicitHeight: parent.height
                    color: "#ff9900"
                    border.width: 2*topWindow.sizeFactor; border.color: "#4c4d4f"
                }

Julien B

@dauuser

It seems because parent.width use Menu width which is be 0 by default on my platform (linux), however Menu height is based on the number of item in the menu.

You should try:

background: Rectangle{
    implicitWidth: 200 // Set here the width you want
    color: "#ff9900"
    border.width: 2*topWindow.sizeFactor; border.color: "#4c4d4f"
}

dauuser

ah right, menu is parent and not the rectangle on the next level, in which I set the width and height. okay, so one last question:
how can I detect the state of the menu. I can open it via settingsmenu.open() . and if it's opened I want to close it with a click on the same button, therefore I need the state of the menu right?

Julien B

@dauuser,

Maybe you can find something in the closePolicy.

You can also add property bool menuIsOpen : false to your menu and add thiswhere you want to click:

onClicked: {
    if (settingsmenu.menuIsOpen) {
        settingsmenu.close()
        settingsmenu.menuIsOpen = false;
    } else {
        settingsmenu.open()
        settingsmenu.menuIsOpen = true;
    }
}

I didn't find anything concerning the menu status and I don't know if such variable actually exist.

dauuser

@Julien-B said in How does style work for the qml type Menu:

@dauuser,

Maybe you can find something in the closePolicy.

You can also add property bool menuIsOpen : false to your menu and add thiswhere you want to click:
onClicked: {
    if (settingsmenu.menuIsOpen) {
        settingsmenu.close()
        settingsmenu.menuIsOpen = false;
    } else {
        settingsmenu.open()
        settingsmenu.menuIsOpen = true;
    }
}
I didn't find anything concerning the menu status and I don't know if such variable actually exist.

@Julien-B

works fine. but the problems don't end. only working since two months with qml and qt, forgive me.
my menu has no functionality, I can open and close it now without problems, but the signals onClicked and onTriggered wont work. it's like the mouseArea of the menu is on another tier. Property z won't work. also I've got some problems with the color if the menu items. Any clues?

        Menu{
            id: settingsMenu
            transformOrigin: Menu.TopRight
            background: Rectangle {
                implicitWidth: settingsMenuContainer.width
                color: "#f2f2f2"
            }

            MenuItem{
                id: userInfo
                text: "Testuser Mister";
                contentItem: Text{
                    text: userInfo.text; font.pointSize: 20; font.family: robothinFont.name; color: "#4c4d4f"
                }
                onTriggered: {
                    //TODO
                }
            }
            MenuItem{
                id: myOrders
                text: "Meine Bestellungen";
                contentItem: Text{
                    text: myOrders.text; font.pointSize: 20; font.family: robothinFont.name; color: "#4c4d4f"
                }
                onTriggered: {
                    //TODO
                }
            }
            MenuItem{
                id: infoAndBalance
                text: "Profilinfo & Punkteverlauf";
                contentItem: Text{
                    text: infoAndBalance.text; font.pointSize: 20; font.family: robothinFont.name; color: "#4c4d4f"
                }
                onTriggered: {
                    //TODO
                }
            }
            MenuItem{
                id: settings                
                background: Rectangle{
                    color: "#ff9900"
                }
                contentItem: Text{
                    text: "Einstellungen"; font.pointSize: 20; font.family: robothinFont.name; color: "#4c4d4f"
                }
                onClicked: {
                    stackView.push(settingsPageComponent) // doesn't work, also, the background-color is not orange, like set above
                }
            }
            }
    }

Eeli K

Have you tried setting MenuItem's background's implicit width/height?

When customizing Controls 2 components it's helpful to open the corresponding default implementation file from the installed Qt's directory, e.g. path_to_qt_/5.8/mingw/qml/QtQuick/Controls.2/MenuItem.qml. There you can see how the sizes are set/calculated by default. If you don't see background color it may mean that the background size is 0. In that case the MenuItem takes contentItems size + padding.

For the text, use the last form of you MenuItems: only contentItem which has text property, no MenuItem's text property.

The onClicked problem is strange. I tend to put "console.log("some message")" as the first line of such function to see if it's actually called or if the problem is somewhere else.

dauuser

@Eeli-K said in How does style work for the qml type Menu:

Have you tried setting MenuItem's background's implicit width/height?

When customizing Controls 2 components it's helpful to open the corresponding default implementation file from the installed Qt's directory, e.g. path_to_qt_/5.8/mingw/qml/QtQuick/Controls.2/MenuItem.qml. There you can see how the sizes are set/calculated by default. If you don't see background color it may mean that the background size is 0. In that case the MenuItem takes contentItems size + padding.

For the text, use the last form of you MenuItems: only contentItem which has text property, no MenuItem's text property.

The onClicked problem is strange. I tend to put "console.log("some message")" as the first line of such function to see if it's actually called or if the problem is somewhere else.

ha you got the problem. it's not logic to me that the default size of background is 0 and I have to set it manually. Very well, now everything works. thank you so much, both of you! :)