QML弹出多级菜单

qml中的弹出多级菜单，可以用于右键弹出，也可以在MenuBar中添加，用法是一样的。本文以右键弹出多级菜单为例，实例演示如何使用qml中的多级菜单，以及自定义菜单的样式。

我们要调用的RightPopUpMenu组件，在使用时，参照main.qml中的用法

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 500
    height: 300
    title: qsTr("Hello PopMenu")

    RightPopUpMenu {
        id: rightPopUpMenu
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked: {
            if (mouse.button === Qt.RightButton) {
                rightPopUpMenu.popup();
            }
        }
    }
}

以下是各qml详细的代码：

RightPopUpMenu.qml

import QtQuick 2.5
import QtQuick.Controls 2.5

Menu {
    id: firstMenu
    title: qsTr("剪切")

    Action {
        text: qsTr("剪切");
        onTriggered: {
            console.log("---剪切-----");
        }
    }

    Action {
        text: qsTr("复制");
        onTriggered: {
            console.log("---复制-----");
        }
    }

    CustomMenuSeparator {}

    Action { text: qsTr("重命名") }

    CustomMenuSeparator {}

    InsertSubMenu {}

    ModifySubMenu {}

    CustomMenuSeparator {}

    Action { text: qsTr("删除") }

    delegate: MenuDelegate {} //注意这里的delegate不能为某个Component
    background: MenuBg {}
}

定义菜单的背景MenuBg.qml：

import QtQuick 2.5

Rectangle {
    implicitWidth: 140
    implicitHeight: 29
    color: Qt.rgba(62/255, 65/255, 75/255, 0.90)
    radius: 4
}

定义菜单样式的delegate文件：
MenuDelegate.qml

import QtQuick 2.5
import QtQuick.Controls 2.5

MenuItem {
    id: menuItem
    implicitWidth: 140
    implicitHeight: 29

    leftPadding: 20

    topPadding: 0
    bottomPadding: 0

    font: Qt.font({
                  family: "微软雅黑",
                  pixelSize: 12,
                  })

    contentItem: Text {
         id : labelTxt
         text: menuItem.text
         font: menuItem.font
         opacity: enabled ? 1.0 : 0.3
         color: menuItem.highlighted ? "#00AFFF" : "#FFFFFF"
         horizontalAlignment: Text.AlignLeft
         verticalAlignment: Text.AlignVCenter
         elide: Text.ElideRight
     }

    arrow: Image {
            x: parent.width - 12
            y: (parent.height - height)/2
            visible: menuItem.subMenu
            source: "qrc:/images/small_right_arrow.png"
        }

    background: Rectangle {
        anchors.centerIn: menuItem
        implicitWidth: 140
        implicitHeight: 25
        opacity: enabled ? 1 : 0.3
        color: menuItem.highlighted ? "#33373F" : "transparent"
    }
}

定义分割线样式CustomMenuSeparator.qml

import QtQuick 2.5
import QtQuick.Controls 2.5

MenuSeparator {
    padding: 0
    topPadding: 0
    bottomPadding: 0
    contentItem: Rectangle {
        implicitWidth: 200
        implicitHeight: 1
        color: "#1E000000"
    }
}

插入二级菜单InsertSubMenu.qml

import QtQuick 2.5
import QtQuick.Controls 2.5

Menu {
    title: qsTr("添加")

    property var downBottomLvFunc: undefined
    property var downOneLvFunc: undefined

    CustomMenuSeparator {}

    Action {
        text: qsTr("直线");
        onTriggered: {
            console.log("---置于底层-----");
            if (downBottomLvFunc){
                downBottomLvFunc();
            }
        }
    }

    Action {
        text: qsTr("曲线");
        onTriggered: {
            console.log("---down one level-----");
            if (downOneLvFunc) {
                downOneLvFunc();
            }
        }
    }

    Action {
        text: qsTr("圆形");
        onTriggered: {
            console.log("---down one level-----");
            if (downOneLvFunc) {
                downOneLvFunc();
            }
        }
    }

    delegate: MenuDelegate {}
    background: MenuBg {}
}

二级菜单ModifySubMenu.qml

import QtQuick 2.5
import QtQuick.Controls 2.5


Menu {
    title: qsTr("修改")

    CustomMenuSeparator {}

    ModifyLenSubMenu {}

    Action {
        text: qsTr("调整宽度");
        onTriggered: {
            console.log("---modify width-----");
        }
    }

    Action {
        text: qsTr("调整颜色");
        onTriggered: {
            console.log("---modify height-----");
        }
    }

    delegate: MenuDelegate {}
    background: MenuBg {}
}

三级菜单ModifyLenSubMenu.qml

import QtQuick 2.5
import QtQuick.Controls 2.5


Menu {
    title: qsTr("修改长度")

    CustomMenuSeparator {}

    Action {
        text: qsTr("增加一像素");
        onTriggered: {
            console.log("---add one pixel-----");
        }
    }

    Action {
        text: qsTr("减少一像素");
        onTriggered: {
            console.log("---sub one pixel-----");
        }
    }

    delegate: MenuDelegate {}
    background: MenuBg {}
}

资源文件图片，下面的小三角，右键另存为即可。

运行效果图：

完整的demo我已经上传到github上，地址
https://github.com/xiaozia/blogs/tree/master/qml/20190728/popMenuDemo1