Как сделать меню с подменю в qml?

Question

Я пытаюсь создать меню, которое может иметь подменю для некоторых из его опций.

Я хочу, чтобы его поведение было таким же, как и на большинстве веб-сайтов.

Когда мы наведем курсор на опцию, у которой есть подменю, это подменю произойдет, если стрелка мыши уйдет куда-то еще, кроме подменю, подменю закроется.

Я собираюсьпроиллюстрируйте изображениями.

Когда мы войдем в подменю, у нас будет следующее:

Теперь мы наведем курсор на опцию Language, ее подменю будет происходить

Теперь то, что не сделано, - это поведение, которое я хочу.Если мы находимся на Language, то подменю видно.Если я пройду прямо из language в подменю языка, оно останется там как и было задумано.

Код этого примера приведен ниже:

main.qml

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

main.qml

import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

ApplicationWindow {
    visible: true
    width: 640
    height: 500
    title: qsTr("Tabbars")
    Button{
        id: button
        text: "Menu"
        onClicked: contextMenu.open()
        anchors.top:parent.top
        anchors.left:parent.left
        height: 20
        width: 100
    }
    Menu {
        id: contextMenu
        y: button.height
        padding: 1
        background: Rectangle {
            implicitWidth: 200
            border.color: "#fff"
            color: "#000"
        }
        Button {
            id: languageMenuItem
            text: qsTr("Language")
            width:parent.width
            height: 35
            background: Item {
                Rectangle {
                    anchors.fill: parent
                    color: "#555"
                    opacity: mouseArea1.pressed ? 1 : mouseArea1.containsMouse ? 0.6 : 0.0
                    MouseArea {
                        id: mouseArea1
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: function() {
                            submenuLanguage.open()
                        }
                        onExited: function() {
                        }
                    }
                }
            }
            contentItem: Text {
                text: languageMenuItem.text
                color: "#fff"
                font.pointSize: 12
                font.bold: true
            }
            Rectangle {
                z: 1
                color: "#000"
                opacity: 0.5
                anchors.fill: parent
                visible: !parent.enabled
            }
            Component.onCompleted: {
                mouseArea1.clicked.connect(clicked)
            }
        }
        CMenuItem{
            text: qsTr("Exit")
            width: parent.width
            onClicked: close()
        }
    }
    Menu {
        id:submenuLanguage
        x: contextMenu.width
        background: Rectangle {
            implicitWidth: 200
            border.color: "#fff"
            color: "#000"
        }
        Connections {
            target: mouseArea1
            onExited: {
                console.log("mouseArea leaving")
            }
        }
        CMenuItem{
            id:btlingen
            width: parent.width
            text: qsTr("English")
            onClicked: {
                contextMenu.close()
                console.log("English")
            }
        }
        CMenuItem{
            id:btlingpt
            width: parent.width
            text: qsTr("Português")
            onClicked: {
                contextMenu.close()
                console.log("Português")
            }
        }
        CMenuItem{
            id:btlinges
            width: parent.width
            text: qsTr("Español")
            onClicked: {
                contextMenu.close()
                console.log("Español")
            }
        }
        CMenuItem{
            id:btlingit
            width: parent.width
            text: qsTr("Italiano")
            onClicked: {
                contextMenu.close()
                console.log("Italiano")
            }
        }
        CMenuItem{
            id:btlingde
            width: parent.width
            text: qsTr("Deutsch")
            onClicked: {
                contextMenu.close()
                console.log("Deutsch")
            }
        }
    }

}

CMenuItem.qml

    import QtQuick 2.0
    import QtQuick.Controls 2.1
    import QtQuick.Controls.Styles 1.4

    MenuItem {
        id: mainMenuItem
        background: Item {
            Rectangle {
                anchors.fill: parent
                color: "#555"
                opacity: mouseArea.pressed ? 1 : mouseArea.containsMouse ? 0.6 : 0.0
                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                }
            }
        }
        contentItem: Text {


text: mainMenuItem.text
        color: "#fff"
        font.pointSize: 12
        font.bold: true
    }
    Rectangle {
        z: 1
        color: "#000"
        opacity: 0.5
        anchors.fill: parent
        visible: !parent.enabled
    }
    Component.onCompleted: {
        mouseArea.clicked.connect(clicked)
    }
}

Как я могу это сделать?

Answer 1

Используйте свойство cascade для создания вложенного меню:

ApplicationWindow {
    id: window
    width: 320
    height: 260
    visible: true

    menuBar: MenuBar {
        Menu {
            title: qsTr("&Foo")
            Menu {
                cascade: true  // Nested menu
                title: qsTr("&Bar")
                Action { text: qsTr("A1") }
                Action { text: qsTr("A2") }
                Action { text: qsTr("A3") }
            }
    }
}
}