QML：如何为所有菜单添加阴影？

Question

我需要为应用程序中的所有菜单添加阴影。我知道如何给一个菜单添加阴影：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Menu {
        id: contextMenu
        MenuItem {
            text: "Menu item 1"
        }
        MenuItem {
            text: "Menu item 2"
        }
        Menu {
            id: subMenu
            title: "Sub menu"
            MenuItem {
                text: "Sub menu item 1"
            }
            MenuItem {
                text: "Sub menu item 2"
            }
        }
    }

    DropShadow
    {
        width: contextMenu.width;
        height: contextMenu.height;
        x: contextMenu.x
        y: contextMenu.y
        visible: contextMenu.visible;

        source: contextMenu.background;

        horizontalOffset: 0;
        verticalOffset: 5;
        radius: 10;
        samples: 7;
        color: "black";
    }

    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.RightButton
        onClicked: {
            contextMenu.popup()
        }
    }

}

但是在这种情况下，子菜单中没有添加阴影。此外，我不想为我的应用程序中的每个菜单复制 DropShadow。我想创建一个 MenuWithShadow 项并用它代替菜单项。

是否可以创建 MenuWithShadow 项目？如何创建？

Answer 1

我能想到的最简单的方法是通过自定义菜单的背景项。这是一个带有发光的简单菜单：

假设我们有 MenuWithGlow 文件：

Menu{
    background: Rectangle {
        id: bgRectangle
        implicitWidth: 200
        implicitHeight: 40
        border.color: "black"

        layer.enabled: true
        layer.effect: DropShadow{
            width: bgRectangle.width
            height: bgRectangle.height
            x: bgRectangle.x
            y: bgRectangle.y
            visible: bgRectangle.visible

            source: bgRectangle

            horizontalOffset: 0
            verticalOffset: 5
            radius: 10
            samples: 7
            color: "#000000"
        }
    }
}

QML：如何为所有菜单添加阴影？

QML: How to add shadow to all menus?

qt

qml

qt5

qtquick2

qtquickcontrols2