QML: Как добавить тень ко всем меню?

Мне нужно добавить тени ко всем меню в моем приложении. Я знаю, как добавить тень к одному меню:

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? Как это можно создать?


qt qml qtquick2 qt5 qtquickcontrols2
person Andrey Epifantsev    schedule 08.01.2020    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Самый простой способ, который я мог придумать, - это настроить фоновый элемент меню. Вот простое меню со свечением:

Предположим, у нас есть файл 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"
        }
    }
}
person Roya Ghasemzadeh    schedule 14.01.2020