QML: how to hide submenu?

Question

I have some menu and this menu contains submenu. In some cases this submenu should be visible. In other cases this submenu should be invisible. How to do this?

I try to use visible property, but it does not work. The submenu is always visible. In code example below submenu should be visible if we click left mouse button and invisible if we click right mouse button. But it is visible in both cases.

import QtQuick 2.13
import QtQuick.Window 2.13
import QtQuick.Controls 2.13

Window {
    visible: true
    width: 640
    height: 480
    property bool visibleSubMenu : false

    Menu {
        id: contextMenu
        MenuItem {
            text: "Menu item"
        }
        Menu {
            title: "Sub menu"
            visible: visibleSubMenu
            MenuItem {
                text: "Sub menu item"
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onClicked: {
            if (mouse.button === Qt.RightButton)
                visibleSubMenu = false;
            else 
                visibleSubMenu = true;
            console.log(visibleSubMenu)
            contextMenu.popup()
        }
    }
}

eyllanesc eyllanesc · Accepted Answer · 2019-12-04T00:55:01

The Menu(QQuickMenu) is an element that saves the information but it is not a visual element, the visual element is its parent that is a MenuItem(QQuickMenuItem) so you must hide the parent:

property bool visibleSubMenu : true
onVisibleSubMenuChanged: sub_menu.parent.visible = visibleSubMenu

Menu {
    id: contextMenu
    MenuItem {
        text: "Menu item"
    }
    Menu {
        id: sub_menu
        title: "Sub menu"
        MenuItem {
            text: "Sub menu item"
        }
    }
}

QML: how to hide submenu?

1 Answers