如何在Qt Quick QML中实现覆盖其他矩形的半透明模糊叠加层

问题原因 #

你的代码存在两处核心逻辑错误：

1. ShaderEffectSource的捕获源设置错误：你选择了纯黑半透明的blurRect作为模糊源，自然模糊后只会输出黑色块，实际上你需要捕获的是下层需要被模糊的背景内容。
2. 组件层级逻辑错误：你将纯黑矩形直接覆盖在背景上，后续模糊效果又基于该黑色块渲染，完全遮盖了下层的蓝色背景，无法得到预期效果。

正确实现逻辑 #

要实现覆盖在其他元素上的半透明模糊（毛玻璃）效果，需要先捕获下层所有需要被模糊的背景内容，对其做模糊处理后，再叠加半透明的颜色遮罩即可。

实现代码 #

首先根据你使用的Qt版本导入GraphicalEffects模块：

• Qt5 导入：import QtGraphicalEffects 1.15
• Qt6 导入：import Qt5Compat.GraphicalEffects

完整示例代码：

import QtQuick 2.15
// 替换为对应Qt版本的GraphicalEffects导入语句
import QtGraphicalEffects 1.15

Rectangle {
    id: mainRect
    anchors.fill: parent
    color: "transparent"

    // 下层背景内容（所有需要被模糊的内容都放在该层级下）
    Rectangle {
        id: backgroundRect
        anchors.fill: parent
        color: "blue"
        // 测试用背景文本，可验证模糊效果
        Text {
            anchors.centerIn: parent
            text: "测试背景内容"
            color: "white"
            font.pixelSize: 32
        }
    }

    // 捕获下层背景内容
    ShaderEffectSource {
        id: effectSource
        sourceItem: backgroundRect
        anchors.fill: backgroundRect
        // 开启实时捕获，背景动态变化时模糊层同步更新
        live: true
    }

    // 对捕获的背景做模糊处理
    FastBlur {
        id: backgroundBlur
        anchors.fill: effectSource
        source: effectSource
        radius: 32
    }

    // 叠加半透明遮罩，调整颜色和透明度即可实现不同风格的毛玻璃效果
    Rectangle {
        id: blurMask
        anchors.fill: parent
        color: "#000000"
        opacity: 0.5
    }
}

注意事项 #

• 修改FastBlur的radius属性可以调整模糊强度，数值越大模糊效果越明显。
• 调整blurMask的color和opacity属性，可以得到不同色调和透明度的毛玻璃效果，比如设为白色、透明度0.3即可得到浅色毛玻璃效果。
• 如果不需要跟随背景动态更新，可以将ShaderEffectSource的live属性设为false，降低性能消耗。

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