我怎样才能生成一个盒子阴影而不是一个阴影？ Qt/C++ 6.4.1

Question

我正在尝试为我的海关小部件创建一个框阴影效果，但我找不到方法来做到这一点..

使用QGraphicsDropShadowEffect class 生成一个阴影，它是小部件本身形状的副本，并将该副本放在小部件后面。 因此，当我将小部件的不透明度设置为 50% 时，阴影会穿过小部件，而我想要实现的更像是 web CSS styles 中存在的框阴影效果，例如：

css 生成：

https://i.ibb.co/mG1XXG2/box-shadow-qt-ask1.png

QGraphicsDropShadowEffect 生成：

https://i.ibb.co/y680RKx/box-shadow-qt-ask2.png

如您所见，我的两个元素都有阴影，并且不透明度为 50%，css 生成的阴影在半透明 div 元素中不可见，但是QGraphicsDropShadowEffect生成的阴影可以通过半透明小部件看到，有一些方法可以创建一个自定义阴影，其行为类似于 css box-shadow 但在我的 Qt/c++ 小部件上？

抱歉，如果我不清楚，我不是英语专家。 感谢您的耐心等待。

Answer 1

作弊是将您的 object + 阴影分组为一个项目。 在使整个 object 不可见的同时，您使用虚拟 OpacityMask 复制整个项目。 然后，将不透明度应用于 OpacityMask。

例如：

import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Page {
    background: Rectangle { color: "#ccc" }
    Frame {
        id: butterflyWithBoxShadow
        anchors.centerIn: parent
        visible: false
        padding: 15
        background: Item {
            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: butterflyWithBoxShadow.padding * 2
                anchors.topMargin: butterflyWithBoxShadow.padding * 2
                color: "grey"
                opacity: 0.5
            }
        }
        Frame {
            id: frame
            padding: 1
            background: Rectangle {
                border.color: "blue"
                border.width: 1
                color: "#ffe"
            }            
            Image {
                id: butterfly
                fillMode: Image.PreserveAspectFit
                source: "https://www.arcgis.com/sharing/rest/content/items/185841a46dd1440d87e6fbf464af7849/data"
                smooth: true
            }
        }
    }
    OpacityMask {
        anchors.fill: butterflyWithBoxShadow
        source: butterflyWithBoxShadow
        invert: true
        opacity: slider.value
    }
    Frame {
        anchors.horizontalCenter: parent.horizontalCenter
        y: parent.height * 8 / 10
        background: Rectangle { }
        Slider {
            id: slider
            from: 0
            to: 1
            value: 0.8
        }
    }
}

您可以在线试用！