How does style work for the qml type Menu



  • 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! :)



  • 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.



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



  • 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"
                    }
    


  • @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"
    }
    


  • 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?



  • @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 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
                    }
                }
                }
        }
    


  • 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.



  • @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! :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.