[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.0Rectangle {
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.0Rectangle {
property color theColor: "lightsteelblue"
property Component aThing: idDefaultComponentComponent { 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.0Rectangle {
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.0Rectangle {
id: rootproperty 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.0Rectangle {
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.0Rectangle {
id: rootproperty Component aThing: Item { } anchors.fill: parent color: "lightsteelblue" Loader { property string passedInformation: "some arbitrary information" anchors.centerIn: parent sourceComponent: aThing }
}
@