qml毛玻璃效果

此文仅作为记录，若有疑问之处，请在评论区留言，我会一一回复，但看几率。

点赞此文，回复几率：10%

点赞并收藏此文，回复几率：50%

关注、点赞并收藏此文，回复几率：99.99%

---

先看运行效果：

---

详细代码如下： 

import QtQuick
import QtQuick.Controls.Material
import QtQuick.Controls
import QtQuick.Effects//*

Item {
    id: rootItem

    Image {
        id: backgroundItem
        source: "img/bg.jpg"
        anchors.fill: parent
    }

    Item {
        id: maskItem
        anchors.fill: panelArea
        layer.enabled: true
        layer.smooth: true
        visible: false
        component PanelMask: Rectangle {
            required property Item item
            x: item.x; y: item.y
            width: item.width; height: item.height
            radius: item.radius
        }
        PanelMask {
            item: toolbar
        }
    }

    MultiEffect {
        anchors.fill: parent
        source: backgroundItem
        autoPaddingEnabled: false
        maskEnabled: true
        maskSource: maskItem
        maskThresholdMin: 0.5
        maskSpreadAtMin: 1.0
        blurEnabled: true
        blurMax: 80
        blur: slider.value
        saturation: 0.1    //饱和度
        brightness: 0.1
    }

    component Panel: Rectangle {
        id: component
        property string text
        property real blurValue
        width: 600; height: 400
        radius: 15
        color: "transparent"
        border.width: 1; border.color: "#8090A0"
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 20
            text: component.text
            font.pixelSize: 30
            color: "white"
            layer.enabled: true
            layer.effect: MultiEffect {
                shadowEnabled: true; shadowBlur: 0.4; shadowOpacity: 1.0
            }
        }
    }

    Item {
        id: panelArea
        anchors.fill: parent
        Panel {
            id: toolbar
            anchors.centerIn: parent
            width: rootItem.width/2; height: rootItem.height/2
            text: "实际显示的毛玻璃效果区域"
            Slider {
                id: slider
                anchors.centerIn: parent
                value: 0.8
                Material.accent: "white"
            }
        }
    }
}