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.

回答1:

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.

回答2:

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

回答3:

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;
   }
}

回答4:

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.

来源：https://stackoverflow.com/questions/12564289/how-can-i-add-property-dynamically-to-a-qml-element

标签

qml