How QML creates a mask window

When QML is designing the interface, the full screen triggers the button, and when a new window pops up, a grayscale processing is required for the position of the non-current window on the screen. This can not only reflect the layering of the interface, but also prevent accidentally touching other buttons, resulting in Exception handling, according to the rules, first the picture above (the original picture on the left, the picture after the pop-up window on the right):
Insert picture description here

1. Principle

The principle of this method is very simple. Create a Rectangle with the same size as the original window, record it as backgroundWin, set the color to gray, and the transparency to be partially transparent, and then create a new Rectangle as fontWin in the middle of backgroundWin, so that it has a visual effect This function can be realized by knocking on the blackboard. The following are the key points to note:
1. The color setting of the background frame must be set to transparent, otherwise there will be no effect.

color: Qt.rgba(0.2,0.2,0.2,0.8)

2. Set the attribute z of the background area to 100, otherwise it may appear that the window is not on the top, as shown in the figure below:

z: 100

Insert picture description here
3. MouseArea must be set in the background frame, otherwise the buttons below will be triggered.

MouseArea {
    
    
	anchors.fill: parent
}

2. Code

MaskWin.qml

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle {
    
    
    id:maskWin
    color: Qt.rgba(0.2,0.2,0.2,0.8)
    width: 1920
    height: 1080
    z: 100
    MouseArea {
    
    
        anchors.fill: parent
    }

    Rectangle {
    
    
        id:showWin
        visible: true
        width: parent.width/2
        height: parent.height/2
        x: (parent.width - width)/2
        y: (parent.height - height)/2
        color: "white"
        radius: 10
    }
}