How make a pane visible on top in qt quick application?

Question

I want to show a Message bar for showing my messages to users,be visible on top of all other windows and pages?

MessageBar.qml

Pane {
id: bar
z: 9999999999999999

property alias message:me
Message{
    id: me
    onContentChanged: {
    }
}
Material.background: message.backColor
height: 48

Label{
    color: "white"
    text: message.content
    anchors.fill: parent
    horizontalAlignment: Label.AlignHCenter
}
property bool visibleState: message.visible&&message.messageType== Message.SimpleMessage
scale: visibleState?1.0:0.0
Behavior on scale {
    NumberAnimation {
        duration: 100
    }
}

}

main.qml

ApplicationWindow { 
    MessageBar{
    id: messageBar
    anchors.centerIn: parent
    Layout.fillWidth: true
    }    
}

but it will be visible under other pages how solve this problem?

Answer 1

The easiest way would be to use a Popup. These are shown above all other items in the scene by default. In addition, you can set a popup's z value to ensure that it's above all other popups.

If you don't want to use a popup for some reason, you can parent the item to the overlay:

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.3

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    Button {
        text: "Button"
    }

    Pane {
        width: 200
        height: 200
        parent: Overlay.overlay
        Material.background: Material.Grey

        Label {
            text: "Above"
            anchors.centerIn: parent
        }
    }
}