如何在 QtQuick 2.0 上为矩形创建投影答案

【问题标题】：How to create drop shadow for Rectangle on QtQuick 2.0如何在 QtQuick 2.0 上为矩形创建投影
【发布时间】：2013-03-07 11:47:29
【问题描述】：

如何在 QtQuick 2.0 上为 Rectangle 视觉项目绘制阴影？
我喜欢为我的主窗口画一个阴影（我有一个透明且没有装饰的窗口）

【问题讨论】：

标签： qt qml qtquick2

【解决方案1】：

有趣的问题...我一直在寻找更好的方法来做到这一点。这是我暂时为 QML 矩形实现投影效果的快速而肮脏的方法。

Rectangle{
    width: 500
    height: 500
    color: "dark grey"


    Rectangle {
        id: backgroundRect
        width: 200
        height: 150
        radius: 5
        anchors.centerIn: parent
        color: "red"

        Rectangle {
            id: dropShadowRect
            property real offset: Math.min(parent.width*0.025, parent.height*0.025)
            color: "purple"
            width: parent.width
            height: parent.height
            z: -1
            opacity: 0.75
            radius: backgroundRect.radius + 2
            anchors.left: parent.left
            anchors.leftMargin: -offset
            anchors.top: parent.top
            anchors.topMargin: offset
        }
    }
}

【讨论】：

谢谢，但是结果阴影很平。我喜欢有一个光滑的阴影
@S.M.Mousavi 是的，我完全同意。让它看起来更平滑的唯一方法是玩弄渐变......我希望有更好的选择。
谢谢@stackunderflow :)

【解决方案2】：

只需使用来自QtGraphicalEffects 模块的DropShadow。

一个完整的工作示例：

import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
    width: 640
    height: 480
    color: "blue"

    Rectangle {
        id: rect
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "red"
    }

    DropShadow {
        anchors.fill: rect
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        source: rect
    }
}

请注意，您会看到许多类似这样的警告：

file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/DropShadow.qml:391:5： QML SourceProxy：检测到属性“输出”的绑定循环 file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy：检测到属性“输出”的绑定循环 file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy：检测到属性“输出”的绑定循环 file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:66:5: QML SourceProxy：检测到属性“输出”的绑定循环 file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianDirectionalBlur.qml:61:5: QML SourceProxy：检测到属性“输出”的绑定循环 file:///opt/Qt5.0.1/5.0.1/gcc_64/qml/QtGraphicalEffects/private/GaussianGlow.qml:53:5：QML SourceProxy：检测到属性“输出”的绑定循环

这些警告是QTBUG-28521，已在 Qt 5.0.2 中修复（在撰写本文时尚未发布）。幸运的是，除了烦人的控制台输出之外，没有任何实际问题。

【讨论】：

不！结果阴影非常坚实/平坦。我喜欢有一个平滑的阴影。
我敢打赌它不能顺利淡出的原因是因为这个问题：stackoverflow.com/q/14576547/331041
我同意...我想这是我的问题

【解决方案3】：

作为剪裁阴影问题的解决方法，您可以将 Rectangle 放在 Item 中，并加上额外的边距以考虑模糊半径，并在该容器上应用阴影：

import QtQuick 2.0
import QtGraphicalEffects 1.0

Item {
    width: 320
    height: 240

    Item {
        id: container
        anchors.centerIn: parent
        width:  rect.width  + (2 * rectShadow.radius)
        height: rect.height + (2 * rectShadow.radius)
        visible: false

        Rectangle {
            id: rect
            width: 100
            height: 50
            color: "orange"
            radius: 7
            antialiasing: true
            border {
                width: 2
                color: "red"
            }
            anchors.centerIn: parent
        }
    }

    DropShadow {
        id: rectShadow
        anchors.fill: source
        cached: true
        horizontalOffset: 3
        verticalOffset: 3
        radius: 8.0
        samples: 16
        color: "#80000000"
        smooth: true
        source: container
    }
}

【讨论】：

我忘记了，但是你应该在Item容器上指定visible: false，因为DropShadow效果会自己复制源项目，所以它会避免奇怪的渲染问题。
在我的情况下，Qt 5.15.2 这导致容器内部在 iOS 上没有收到任何触摸/鼠标事件。

【解决方案4】：

我尝试了上面的代码，它实际上添加了一个阴影，尽管在我的例子中，简单地添加另一个带有一点偏移的矩形给了我一个我更喜欢的效果。

Rectangle{

    id: rec_Shadow
    height:rect_withShadow.height
    width: rect_withShadow.width
    border.color: "#B3B3B3"
    color: "#C5C5C5"

    anchors{
            verticalCenter: rect_withShadow.verticalCenter
            horizontalCenter:  rect_withShadow.horizontalCenter
            horizontalCenterOffset: 5
            verticalCenterOffset: 5
        }
    radius: rect_withShadow.radius
}

接下来，添加要在其上添加阴影的 Rectangle，并将其命名为 rect_withShadow

【讨论】：