Qt6中ShaderEffect阴影被父Item裁剪的问题求助

问题原因 #

你的代码中存在两个核心限制导致阴影被裁剪：

1. ShaderEffect的尺寸与目标矩形mrect完全一致，阴影偏移和模糊后会超出自身边界被裁剪；
2. 父Item的尺寸刚好包裹mrect，即使ShaderEffect能容纳阴影，父容器的边界也会限制阴影显示（尽管Item默认clip: false，但布局空间不足会导致阴影无法完整渲染）。

解决方案1：扩大容器与ShaderEffect尺寸，预留阴影空间 #

通过调整父容器和ShaderEffect的尺寸，为阴影的偏移、模糊效果预留足够空间：

import QtQuick

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

    Item{
        anchors.centerIn: parent
        // 父容器增加尺寸，预留阴影空间（这里取30px，对应阴影偏移15px的两倍）
        height: parent.height * 0.6 + 30
        width:  parent.width * 0.9 + 30

        Rectangle{
            id: mrect
            anchors.centerIn: parent
            height: parent.height - 30
            width:  parent.width - 30
            radius: height * 0.2
            color: "yellow"
            visible: !shadow.visible
        }

        ShaderEffectSource{
            id: theSource
            sourceItem: mrect
        }

        ShaderEffect {
            id: shadow
            // ShaderEffect尺寸扩大，容纳阴影
            width: mrect.width + 30
            height: mrect.height + 30
            anchors.centerIn: mrect
            property variant source: theSource
            property variant shadow: ShaderEffectSource {
                sourceItem: ShaderEffect {
                    width: mrect.width + 30
                    height: mrect.height + 30
                    property variant delta: Qt.size(0.0, 1.0 / height)
                    property variant source: ShaderEffectSource {
                        sourceItem: ShaderEffect {
                            width: mrect.width * 1.5 + 30
                            height: mrect.height * 1.5 + 30
                            property variant delta: Qt.size(1.0 / width, 0.0)
                            property variant source: theSource
                            fragmentShader: "shaders/blur.frag.qsb"
                        }
                    }
                    fragmentShader: "shaders/blur.frag.qsb"
                }
            }
            property real angle: 0.5
            property variant delta: Qt.size(15 / width, 15 / height)
            property real darkness: 0.2
            fragmentShader: "shaders/shadow.frag.qsb"
        }
    }
}

解决方案2：将阴影ShaderEffect移至容器外，脱离父元素限制 #

把阴影效果作为Window的直接子元素，完全脱离原父容器的尺寸约束，同时通过z值确保阴影显示在目标矩形下方：

import QtQuick

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

    Item{
        id: container
        anchors.centerIn: parent
        height: parent.height * 0.6
        width:  parent.width * 0.9

        Rectangle{
            id: mrect
            anchors.fill: parent
            radius: height * 0.2
            color: "yellow"
        }
    }

    ShaderEffectSource{
        id: theSource
        sourceItem: mrect
    }

    ShaderEffect {
        id: shadow
        width: mrect.width + 30
        height: mrect.height + 30
        anchors.centerIn: container
        // 确保阴影在目标矩形下方
        z: container.z - 1
        property variant source: theSource
        property variant shadow: ShaderEffectSource {
            sourceItem: ShaderEffect {
                width: mrect.width + 30
                height: mrect.height + 30
                property variant delta: Qt.size(0.0, 1.0 / height)
                property variant source: ShaderEffectSource {
                    sourceItem: ShaderEffect {
                        width: mrect.width * 1.5 + 30
                        height: mrect.height * 1.5 + 30
                        property variant delta: Qt.size(1.0 / width, 0.0)
                        property variant source: theSource
                        fragmentShader: "shaders/blur.frag.qsb"
                    }
                }
                fragmentShader: "shaders/blur.frag.qsb"
            }
        }
        property real angle: 0.5
        property variant delta: Qt.size(15 / width, 15 / height)
        property real darkness: 0.2
        fragmentShader: "shaders/shadow.frag.qsb"
    }
}

注意事项 #

• 预留空间的大小需要根据阴影的偏移量、模糊半径调整，比如模糊半径较大时，需要将30px改为更大的值；
• 方案2的灵活性更高，适合阴影扩展范围较大的场景；
• 始终通过z值控制阴影与目标元素的层级关系，避免阴影遮挡目标内容。

内容的提问来源于stack exchange，提问作者UkRiP