QML type: overlay

One 、 describe

overburden . by  Popup  Provides a layer , Make sure  Popup  Show on top of other content , And when modal or dimmed  Popup  The background darkens when visible .

Overlay is a common layer that covers the entire window Item. It can be used as a visual parent to locate in scene coordinates  Popup.

The following example uses additional Overlay.overlay Property will be  Popup  Locate in the center of the window ：

Button {
    onClicked: popup.open()

    Popup {
        id: popup

        parent: Overlay.overlay

        x: Math.round((parent.width - width) / 2)
        y: Math.round((parent.height - height) / 2)
        width: 100
        height: 100
    }
}

Two 、 Additional attribute members

1、Overlay.modal : Component

This additional property contains a component , This component is used as an implementation Modality  Popup  Visual items with darkened background . It is for the visible mode Popup  Create and stack below it .

This attribute can be attached to any  Popup .

for example , To change the mode  Popup  The background darkens , You can use the following code ：

import QtQuick.Window
import QtQuick.Controls

ApplicationWindow {
    id: window
    width: 400
    height: 400
    visible: true

    Button {
        text: "Open"
        onClicked: popup.open()
    }

    Popup {
        id: popup
        x: 100
        y: 100
        width: 200
        height: 300
        modal: true
        focus: true

        Overlay.modal: Rectangle {
            color: "#800000ff"
        }
    }
}

2、Overlay.modeless : Component

This additional property contains a component , This component is used as an implementation Modeless  Popup  The visible item of background dimming . It is for visible dimming  Popup  Create and stack below it .

This attribute can be attached to any  Popup .

for example , To change the background darkening color of the modeless pop-up window , You can use the following code ：

    Popup {
        id: popup
        x: 100
        y: 100
        width: 200
        height: 300
        focus: true
        dim: true    // essential 

        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent

        Overlay.modeless: Rectangle {
            color: "#800000ff"
        }
    }

3、Overlay.overlay : Overlay

This attribute can be attached to any Item、Popup  or Window.

3、 ... and 、 Additional signal members

1、pressed()

When the user Popup  When you press the stack layer when it is visible , This additional signal will be sent .

2、released()

When the user  Popup  When the stack layer is released when it is visible , This additional signal will be sent .