[solved] How do I attach properties to a Component?



  • Hi there,

    I am trying to understand the Component objects. So I've written two .qml files. Container.qml, which is a Rectangle that displays an arbitrary object (aThing). The other file (main.qml) is the application, which uses 'Container' to display the object that is defined within main.qml.

    Now to my question: how do I attach properties (pass information) form from 'Container' to 'aThing'?

    main.qml:
    @import QtQuick 2.0

    Rectangle {
    width: 360; height: 360
    color: "aliceblue"

    Rectangle {
        anchors.centerIn: parent
        width: 300; height: 300
        border {color: "black"; width: 1 }
    
        Container {
            id: container
            anchors.margins: 1
    
            aThing: Rectangle {
                width: 50; height: 50;
                
                // I know, this does not work. But how can I get Component.qml 
                // to pass information to this 'aThing'
                color: Qt.darker(container.theColor, .5)
            }
        }
    }
    

    }@

    Container.qml:
    @import QtQuick 2.0

    Rectangle {
    property color theColor: "lightsteelblue"
    property Component aThing: idDefaultComponent

    Component {
        id: idDefaultComponent
        Rectangle { width: 100; height: 100; color: "red" }
    }
    
    anchors.fill: parent
    color: theColor
    
    Loader {
        id: thing
        anchors.centerIn: parent
        sourceComponent: aThing
    }
    

    }@



  • Yay! Found the solution.

    It's actually pretty simple.
    When creating an object with Loader you can add properties the same way you do with all other objects.
    @Loader {
    property color aNewProperty: "#ff8080"
    sourceComponent: theComponentToCreate
    }@

    I wish this had been mentioned in the documentation to the Loader Element.

    To be complete, here are the working sources.

    main.qml:
    @import QtQuick 2.0

    Rectangle {
    width: 360; height: 360
    color: "aliceblue"

    Rectangle {
        anchors.centerIn: parent
        width: 300; height: 300
        border {color: "black"; width: 1 }
    
        Container {
            anchors.margins: 1
    
            aThing: Rectangle {
                width: 100; height: 100;
                color: Qt.darker(parentColor, 1.5)
    
                border.color: "black"
                border.width: 1
            }
        }
    }
    

    }
    @

    Container.qml:
    @import QtQuick 2.0

    Rectangle {
    id: root

    property color theColor: "lightsteelblue"
    property Component aThing: Item { }
    
    anchors.fill: parent
    color: theColor
    
    Loader {
        property color parentColor: root.theColor
        anchors.centerIn: parent
    
        sourceComponent: aThing
    }
    

    }
    @

    Kudos to myself.



  • Hi,

    I'm glad you found a solution! Just for information purposes, however, I'd like to explain what's actually going on here: basically, the "parentColor" property you've defined is actually a dynamic property of the Loader. When the expression "Qt.darker(parentColor, 1.5)" is evaluated in the child object, the property resolution code will "walk up the scope chain" to find the symbol - and it will resolve to the property of the Loader.

    Another (more direct) way of achieving this, is to instantiate the object passing an "initial property values" map, as documented in QQmlComponent etc.

    Cheers,
    Chris.



  • Thank you for your input Chris,

    the point about this post, as hinted in the title, is to pass information from the place where the Loader Element is used to instantiate an arbitrary object, to the created object. The information passed, serves no deeper purpose then to be passed.

    It seems I've chosen a confusing example. Sorry about that.
    Maybe this will clarify:

    main.qml
    @import QtQuick 2.0

    Rectangle {
    width: 360; height: 360
    color: "aliceblue"

    Rectangle {
        anchors.centerIn: parent
        width: 300; height: 300
        border {color: "black"; width: 1 }
    
        Container {
            anchors.margins: 1
    
            aThing: Rectangle {
                width: 200; height: 200;
                border {color: "black"; width: 1 }
    
                Text {
                    anchors.fill: parent; anchors.margins: 3;
                    text: passedInformation
                    wrapMode: Text.WordWrap
                }
            }
        }
    }
    

    }
    @

    Container.qml:
    @import QtQuick 2.0

    Rectangle {
    id: root

    property Component aThing: Item { }
    
    anchors.fill: parent
    color: "lightsteelblue"
    
    Loader {
        property string passedInformation: "some arbitrary information"
        anchors.centerIn: parent
    
        sourceComponent: aThing
    }
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.