Question

我正在尝试创建一个可能包含某些选项子菜单的菜单。

我希望它具有的行为与我们在大多数网站上看到的相同。

当我们悬停具有子菜单的选项时，该子菜单将会出现，如果鼠标箭头移到该子菜单以外的其他位置，则该子菜单将关闭。

我将用图像来说明。

进入子菜单时，将显示以下内容：

现在，我们将鼠标悬停在“语言”选项上，其子菜单将会出现

现在没有做的就是我想要的行为。如果我们将鼠标悬停在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") }
            }
    }
}
}

如何用qml的子菜单制作菜单？

1 个答案: