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"
        }
    }
}