Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. The new MenuStyle in Qt 5.3 doesn't show sub menu indicator Image

The new MenuStyle in Qt 5.3 doesn't show sub menu indicator Image

Scheduled Pinned Locked Moved QML and Qt Quick
2 Posts 1 Posters 1.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Q Offline
    Q Offline
    qt_sur
    wrote on last edited by
    #1

    Hi,

    I'm trying to apply custom style to the "Menu":http://qt-project.org/doc/qt-5/qml-qtquick-controls-menu.html object, with the new "MenuStyle ":https://qt-project.org/doc/qt-5/qml-qtquick-controls-styles-menustyle.htmlobject. The "checkmarkIndicator" shows up (although, the indentation and layout seems incorrect and cannot be modified). But the "submenuIndicator" component doesn't even show up properly; only the top part becomes visible and the rest gets cut off. If I make the font pixels of the Label really large and the make each MenuItem's row height really high, only then the entire "submenuIndicator" Image set comes to view (anchored to the bottom of the row). This was with Qt 5.3 MSVC 2012 OpenGl 32bit, on Windows 7 (haven't had the chance to test it extensively on Linux/Mac yet).

    I'm pasting the code from my test app here, for reference. Any help would be appreciated. Thanks.

    @import QtQuick 2.0
    import QtQuick.Controls 1.0
    import QtQuick.Controls.Styles 1.2
    import QtQml 2.2 // for Instantiator

    Rectangle {
    width: 600
    height: 600

    Rectangle {
        id: clickableRect
        focus: true
    
        color: "red"
        width: 300
        height: 300
        anchors.centerIn: parent
    
        ExclusiveGroup {
            id: myGroup
        }
    
        Menu {
            id: myMenu
    
            style: MenuStyle {
                id: myMenuStyle
    
                frame: Rectangle {
                    border.color: "#E7E6E8"
                }
    
                itemDelegate.background: Rectangle {
    
                    border.color: "#E7E6E8"
                    anchors.leftMargin: 15
    
                    color: {
                        if ( styleData.selected) return "lightblue";
                        else return "white";
                    }
                }
    
                itemDelegate.label: Label {
    
                    color: {
                        if (!styleData.selected) return "grey";
                        else return "white";
                    }
                    text: styleData.text
                    font.pixelSize: 25 // If this value is really high (e.g. 70), then the row height of each MenuItem increase AND ONLY THEN, does submenu indicator image show up
    
                    //anchors.leftMargin: 10 // doesn't do anything
                }
    
                itemDelegate.checkmarkIndicator: Rectangle {
                    //CANNOT specify the alignment or layout for this component. But at least it shows up entirely
                    color: "blue"
                    anchors.rightMargin: 15
    
                    Image {
                        fillMode: Image.Tile
                        source: {
                            if (styleData.checked) {
                                return "menu_selected_checkmark.png";
                            } else {
                                return "";
                            }
                        } // source
                    }
                }
    
                itemDelegate.submenuIndicator: Image {
                    // This image doesn't even show up properly. Only the top half of the image shows up. But if the row height of each menu item is increased (by having a LARGE font pixel size), only then it shows properly
                    source: "menu_submenu_arrow_icon.png"
                    fillMode: Image.Tile
                }
    
            }
    
            MenuItem {
                checkable: true
                exclusiveGroup: myGroup
                text: "Item 0"
            }
            MenuItem {
                checkable: true
                exclusiveGroup: myGroup
                text: "Item 0"
            }
            Menu {
                title: "Submenu"
                MenuItem {
                    checkable: true
                    exclusiveGroup: myGroup
                    text: "Sub menu Item 0"
                }
    
                MenuItem {
                    text: "Sub menu Item 1"
                    checkable: true
                    exclusiveGroup: myGroup
                }
            } // Sub Menu item
    
        } // Menu
    
    } // Rectangle
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            //myFocusScope.focus = false;
            clickableRect.focus = false;
            myMenu.popup();
        }
    }
    

    }@

    1 Reply Last reply
    0
    • Q Offline
      Q Offline
      qt_sur
      wrote on last edited by
      #2

      Haven't found any response / solution yet; reported the following bug so that I don't forget later on: https://bugreports.qt-project.org/browse/QTBUG-39758

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved