CODEWITHSUNDEEP
qml
Kalpesh Jain
Kalpesh Jain

Reputation: 409

How can i add property dynamically to a QML element?

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.

Upvotes: 8

Views: 12825

Answers (5)

Kikaxa
Kikaxa

Reputation: 153

For most qml items/objects they inherit QtObject, which is QObject internally.

You want to create static QML singleton in C++(https://doc.qt.io/qt-6/qtqml-cppintegration-definetypes.html) that implements a function

Q_INVOKABLE
void SetProperty(QObject *object, QString property, QVariant value) 
{ 
    object->setProperty(property, value); 
}

and call it at least once. This will create a full-featured qobject/qml property you can use as usual anywhere in qt/qml.

Upvotes: 0

derM
derM

Reputation: 13691

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'.

Upvotes: 13

APRocha
APRocha

Reputation: 378

I don't be sure if can add dynamic properties to qml object, buy one form most easy is disable, hide or change properties with if for example:

if(manual==true)
{
    icon.visible=true
}
else {
    icon.visible=false
}

or you can create dynamic components of your item or change the view with loader element.

Upvotes: -4

NgaiShunChan
NgaiShunChan

Reputation: 11

May be you can do it like this:

Item {
    id: dynamicProperty;
    property int first;
    property var extraData;

    Component.onCompleted: {
        /* once this block of code is executed, i want to add
           property int second; property bool third; property variant fourth;
        */
        var data;
        data["second"] = 0;
        data["third"] = false;
        ...
        extraData = data;
   }
}

Upvotes: 1

sergk
sergk

Reputation: 3631

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.

Upvotes: 5

Related Questions