qt - Get coordinates (screen) of GridLayout items

Question

I have simple QML GridLayout with several QML rectangles layouted in it:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.12

Window
{
    width: 640
    height: 480

    visible: true

    title: qsTr("Hello World")

    color: "black"

    GridLayout
    {
        id: rootLayout

        anchors.fill: parent
        anchors.leftMargin: 42
        anchors.topMargin: 100
        anchors.rightMargin: 56

        rows: 4
        columns: 3

        rowSpacing: 0
        columnSpacing: 0

        flow: GridLayout.LeftToRight

        layoutDirection: Qt.LeftToRight

        Rectangle
        {
            id: redR

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft|Qt.AlignTop
            Layout.minimumWidth: parent.width*0.30
            Layout.preferredWidth: parent.width*0.30
            Layout.maximumWidth: parent.width*0.30
            Layout.minimumHeight: 120
            Layout.preferredHeight: 120
            Layout.maximumHeight: 120

            color: "red"
        }

        Rectangle
        {
            id: greenR

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
            Layout.minimumHeight: 120
            Layout.preferredHeight: 120
            Layout.maximumHeight: 120

            color: "green"
        }

        Rectangle
        {
            id: blueR

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignRight|Qt.AlignTop
            Layout.minimumWidth: parent.width*0.30
            Layout.preferredWidth: parent.width*0.30
            Layout.maximumWidth: parent.width*0.30
            Layout.minimumHeight: 120
            Layout.preferredHeight: 120
            Layout.maximumHeight: 120

            color: "blue"
        }

        Rectangle
        {
            id: cyanR

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft|Qt.AlignTop
            Layout.minimumWidth: 24
            Layout.preferredWidth: 24
            Layout.maximumWidth: 24
            Layout.minimumHeight: 78
            Layout.preferredHeight: 78
            Layout.maximumHeight: 78

            color: "cyan"
        }

        Rectangle
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
            Layout.minimumWidth: 32
            Layout.preferredWidth: 32
            Layout.maximumWidth: 32
            Layout.minimumHeight: 32
            Layout.preferredHeight: 32
            Layout.maximumHeight: 32

            color: "transparent"
        }

        Rectangle
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignRight|Qt.AlignTop
            Layout.minimumWidth: 24
            Layout.preferredWidth: 24
            Layout.maximumWidth: 24
            Layout.minimumHeight: 78
            Layout.preferredHeight: 78
            Layout.maximumHeight: 78

            color: "transparent"
        }

        Rectangle
        {
            id: magentaR

            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
            Layout.minimumWidth: 24
            Layout.preferredWidth: 24
            Layout.maximumWidth: 24
            Layout.minimumHeight: 78
            Layout.preferredHeight: 78
            Layout.maximumHeight: 78

            color: "magenta"
        }

        Rectangle
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
            Layout.columnSpan: 3

            color: "transparent"
        }
    }
}

Now, I am trying to the coordinates of these Rectanangles, however their x and y properties are both 0, even in Component.onCompleted. How do I get these rectangles coordinates, once they are layouted by GridLayout?

question from:https://stackoverflow.com/questions/65879669/get-coordinates-screen-of-gridlayout-items

Answer 1

qml Rectangle inherits qml Item, so you can use mapToGlobal() function: https://doc.qt.io/qt-5/qml-qtquick-item.html#mapToGlobal-method