Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

About accessing a component's root level properties



  • Below is a QML module, ClickableImage.qml:

    // ClickableImage.qml
    // Simple image which can be clicked
    import QtQuick 2.5
    Image {
    id: root
    signal clicked
    MouseArea {
    anchors.fill: parent
    onClicked: root.clicked()
    }
    }

    Then, another module calling this ClickableImage:

    import QtQuick 2.5
    Item {
    // set width based on given background
    width: bg.width
    height: bg.height
    Image { // nice background image
    id: bg
    source: "assets/background.png"
    }
    MouseArea {
    .....
    }
    ClickableImage {
    id: circle
    x: 84; y: 68
    source: "assets/circle_blue.png"
    antialiasing: true
    onClicked: {
    // increase the x-position on click
    x += 20
    }
    }
    ....
    }

    But I found a section of text "It is important to know, that only the root
    level properties can be accessed from outside this file by other components."

    I found no property defined at ClickableImage.qml which can be accessed at Transportation.qml. Besides, in Transportation.qml, inside ClickableImage, the properties, such as 'x', 'y' and 'source' are not defined at root level of Image at ClickableImage.qml.
    How come?



  • @Stan-Huang said in About accessing a component's root level properties:

    ClickableImage

    You can use "property alias" feature to open ClickableImage props to outside.

    //Transportation.qml
    import QtQuick 2.5
    Item {
            id:root
            property alias ci_x: circle.x
            property alias ci_y: circle.y
            property alias ci_source: circle.source
            // set width based on given background
            width: bg.width
            height: bg.height
            Image {
                // nice background image
                id: bg
                source: "assets/background.png"
                MouseArea {
                }
            }
            ClickableImage {
                        id: circle
                        x: 84
                        y: 68
                        source: "assets/circle_blue.png"
                        antialiasing: true
                        onClicked: {
                            // increase the x-position on click
                            x += 20
                        }
                    }
    
    }
    
    

  • Moderators

    @Stan-Huang said in About accessing a component's root level properties:

    But I found a section of text "It is important to know, that only the root
    level properties can be accessed from outside this file by other components."
    I found no property defined at ClickableImage.qml which can be accessed at Transportation.qml. Besides, in Transportation.qml, inside ClickableImage, the properties, such as 'x', 'y' and 'source' are not defined at root level of Image at ClickableImage.qml.
    How come?

    The root item itself has a bunch of properties that can be accessed from outside.
    The root item of ClickableImage is a Image therefore all properties of image are also accessible for ClickableImage.

    You can see what properties a QML Item has, from the documentation:
    https://doc.qt.io/qt-5/qml-qtquick-image.html

    and since Image inherits from Item as well, are all Item properties also part of the Image
    https://doc.qt.io/qt-5/qml-qtquick-item.html


Log in to reply