How can i add property dynamically to a QML element?

Question

I want to add properties dynamically to a QML element:

Item {
 id: dynamicProperty;
 property int first;


 Component.onCompleted: {
  /* once this block of code is executed, i want to add
     property int second; property bool third; property variant fourth;
  */
 }

}

Is there any way to accomplish the above task.

Answer 1

On the one hand: I don't see, why anyone would want to do this, as it is completely non-declarative. However, as QML extends JavaScript, and latter is a prototyping-language, yes, you can do it.

On the how-to, I reccomend to read the JS-Documentation on how to define properties. However I wrote a short example, to demonstrate the use of it.

MouseArea {
    anchors.fill: parent
    onClicked: console.log(rect.newProp)
}

Rectangle {
    id: rect
    width: 50
    height: 50
    x: 50
    y: 50
    color: 'green'

    MouseArea {
        anchors.fill: parent
        onClicked: { var obj = Object.defineProperty(rect, 'newProp',
                                                     {
                                                         enumerable: false,
                                                         configurable: false,
                                                         writable: false,
                                                         value: '50'
                                                     })}
    }
}

On the first click on the background, 'undefined' will be printed. After clicking on the rectangle, this will change to '50'.

Answer 2

I don't think QML was designed to support dynamic property creation.

Depending on your use-case this could be worked around with "script instances" (I made up the term). Basically each QML Component instantiation that import script which doesn't have .pragma library statement will work with its own copy of globals declared in the script.

For example you can look at PageStack (qt-components) code.

There is import "PageStack.js" as Engine statement, and it later referred to call functions that uses global variables like if it was instance variables.

If you looking for a way to add members to your QML Component and don't need property change notifications, "script instances" would do just fine.