Qml semi transparent blur overlay rectangle - qt

Question

I am trying to create a semi transparent blur rectangle which is overlay on another rectangle in Qt Quick Qml.
Rectangle {
id: mainRect
anchors.fill: parent
color: "transparent"
// This is my background rect
Rectangle {
id: backgroundRect
anchors.fill: parent
color: "blue"
}
// This is my semi-transparent-blur overlay rect
Rectangle {
id: blurRect
anchors.fill: parent
color: "#000000"
opacity: 0.5
}
// I did try these but I see black rectangle
ShaderEffectSource {
id: effectSource
sourceItem: blurRect
anchors.fill: blurRect
}
FastBlur{
id: blur
anchors.fill: effectSource
source: effectSource
radius: 32
}
}
I see an black rectangle when I run this.
How should I create a semi transparent blur overlay Rectangle/Item.

Answer 1

Here is how I have done it in the past without layers or manually using ShaderEffectSource objects:
Image {
id: backgroundImage
source: "some_image.png"
}
Item {
id: blurRect
anchors.fill: parent
FastBlur {
anchors.fill: parent
source: backgroundImage
radius: 64
}
Rectangle {
anchors.fill: parent
color: "red"
opacity: 0.5
}
}

Answer 2

Look at this code:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle {
id: backgroundRect
anchors.fill: parent
color: "blue"
}
Rectangle
{
id:blureRect
anchors.fill: parent
layer.smooth: true
layer.enabled: true
opacity: 0.5
layer.effect: ShaderEffect {
id: effectSource
anchors.fill: parent
FastBlur{
id: blur
anchors.fill: effectSource
source: effectSource
radius: 32
}
}
}
}
output:
before blur rect :
after blur rect :
If I use an image in the background you can see blur rect better :
Image {
id: img
anchors.fill: parent
source: "/images/monkey_off_128x128.png"
sourceSize: Qt.size(parent.width, parent.height)
smooth: true
}
Rectangle
{
id:blureRect
anchors.fill: parent
layer.smooth: true
layer.enabled: true
opacity: 0.5
layer.effect: ShaderEffect {
id: effectSource
anchors.fill: parent
FastBlur{
id: blur
anchors.fill: effectSource
source: effectSource
radius: 32
}
}
}