QML动态创建的组件添加自定义属性

????????QML中有两种方法可以动态创建对象。可以调用Qt.createComponent()来动态地创建一个Component对象，然后就可以调用它的createObject()方法来创建组件的实例，或者使用Qt.createQmlObject()从一个QML字符串创建一个对象。

? ? ? ? 在创建好组件的实例后，我们需要在对组件实例添加属性该如何操作呢。使用Qt.createQmlObject()的方式的话可在创建QML对象的字符串中直接使用“property var xxx: vvv”的方式添加属性。

????????当使用Qt.createComponent()时，我们可以在组件qml组件文件里添加属性值，但是如果该qml组件被复用到很多地方，我们又不想在组件文件中添加很多自定义属性时，可以在该组件createObject()后对组件实例单独添加属性。

? ? ? ? 对组件实例添加属性的方法为：Object.defineProperty(obj, prop, desc)。该函数的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。

• obj 需要定义属性的当前对象
• prop 当前需要定义的属性名
• desc 属性描述符

属性描述符?

????????如果我们新增的自定义属性不需要在其他地方被修改，那么只需要设置<value>一个属性名称即可，如果该属性值要被修改，则还需要设置<writable>属性为：true。

示例：

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Row{
        id:row
        spacing:5
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            var component = Qt.createComponent("MyRectangle.qml");
            if (component.status === Component.Ready){
                var myRec = component.createObject(row, {width: 100, height: 100});
                Object.defineProperty(myRec,"newProperty",{value:"4",writable:true})
                console.log(myRec.newProperty)
                myRec.newProperty = 8
                console.log(myRec.newProperty)
            }

        }
    }
}

MyRectangle.qml:

import QtQuick 2.15

Rectangle {
    color:"yellow"
}

程序输出：

qml: 4
qml: 8