如何在QML中实现类似CSS backdrop-filter: blur的窗口背景模糊效果

你需要将找到的高斯模糊着色器适配QML ShaderEffect的输入规范，同时捕获窗口下方的背景内容作为着色器输入，即可实现类似CSS backdrop-filter: blur的效果，具体实现步骤如下：

实现步骤 #

• 首先明确ShaderToy与QML ShaderEffect的变量映射规则，修改着色器代码适配QML环境：
  • ShaderToy的采样输入iChannel0对应QML ShaderEffect的自定义输入source
  • ShaderToy的分辨率变量iResolution对应QML内置变量textureSize
• 用ShaderEffectSource捕获模糊区域下方的背景内容，作为模糊着色器的输入源
• 可通过调整模糊半径参数控制模糊强度，匹配你需要的视觉效果

完整QML示例代码 #

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 800
    height: 600
    visible: true
    title: "毛玻璃模糊效果示例"

    // 底层背景内容，模拟桌面/下层UI
    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#ff7eb3" }
            GradientStop { position: 0.5; color: "#7eb3ff" }
            GradientStop { position: 1.0; color: "#b3ff7e" }
        }
        // 加文本模拟下层内容
        Text {
            text: "下层背景内容"
            font.pixelSize: 40
            anchors.centerIn: parent
            color: "white"
        }
    }

    // 毛玻璃窗口层
    Rectangle {
        id: blurWindow
        width: 400
        height: 300
        anchors.centerIn: parent
        radius: 16
        // 边框增强质感
        border.color: "rgba(255,255,255,0.3)"
        border.width: 1

        // 捕获窗口下方的背景内容
        ShaderEffectSource {
            id: backgroundSource
            sourceItem: parent.parent
            sourceRect: blurWindow.mapToItem(parent.parent, 0, 0, blurWindow.width, blurWindow.height)
            hideSource: false
            live: true // 实时更新背景
        }

        // 高斯模糊着色器效果
        ShaderEffect {
            anchors.fill: parent
            property var source: backgroundSource
            property real radius: 16 // 模糊半径，数值越大越模糊
            property size textureSize: Qt.size(blurWindow.width, blurWindow.height)

            fragmentShader: "
                uniform lowp sampler2D source;
                uniform highp vec2 textureSize;
                uniform highp float radius;
                varying highp vec2 qt_TexCoord0;

                // 适配后的多步高斯模糊实现
                highp vec4 blur(sampler2D image, highp vec2 pos, highp vec2 resolution, highp float radius) {
                    highp vec4 color = vec4(0.0);
                    highp vec2 off1 = vec2(1.411764705882353) * radius / resolution;
                    highp vec2 off2 = vec2(3.2941176470588234) * radius / resolution;
                    highp vec2 off3 = vec2(5.176470588235294) * radius / resolution;
                    color += texture2D(image, pos) * 0.1964825501511404;
                    color += texture2D(image, pos + off1) * 0.2969069646728344;
                    color += texture2D(image, pos - off1) * 0.2969069646728344;
                    color += texture2D(image, pos + off2) * 0.09447039785044732;
                    color += texture2D(image, pos - off2) * 0.09447039785044732;
                    color += texture2D(image, pos + off3) * 0.010381362401148057;
                    color += texture2D(image, pos - off3) * 0.010381362401148057;
                    return color;
                }

                void main() {
                    gl_FragColor = blur(source, qt_TexCoord0, textureSize, radius);
                    // 叠加半透明白色增强毛玻璃质感，可根据需求调整透明度
                    gl_FragColor = mix(gl_FragColor, vec4(1.0,1.0,1.0,1.0), 0.15);
                }
            "
        }

        // 窗口上层控件
        Text {
            text: "毛玻璃窗口内容"
            font.pixelSize: 24
            anchors.centerIn: parent
            color: "white"
        }
    }
}

效果调整说明 #

• 调整radius属性的数值可以控制模糊强度，数值越高背景越模糊
• 修改最后一行混合半透明白色的透明度（当前是0.15）可以调整毛玻璃的提亮效果，适配深色/浅色主题
• 可以额外添加阴影效果增强窗口的层次感，匹配需求的视觉效果

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