如何动态地向QML元素添加属性？

Question

我想动态地向QML元素添加属性:

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

}

有没有办法完成上述任务.

Answer 1

一方面:我没有看到,为什么有人会想这样做,因为它完全不是声明性的.但是,由于QML扩展了JavaScript,后者是原型语言,是的,你可以做到.

关于操作方法,我建议阅读有关如何定义属性的JS-Documentation .不过我写了一个简短的例子来证明它的用法.

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'
                                                     })}
    }
}

在第一次单击背景时,将打印"undefined".单击矩形后,这将更改为"50".

Answer 2

我不认为QML旨在支持动态属性创建。

根据您的用例，可以使用“脚本实例”解决这个问题（我组成了这个术语）。基本上，每个没有.pragma library声明的导入脚本的QML Component实例都将使用在脚本中声明的自己的全局变量副本。

例如，您可以看一下PageStack（qt-components）代码。

有import "PageStack.js" as Engine一条语句，后来它引用使用全局变量的调用函数，例如它是否是实例变量。

如果您正在寻找一种将成员添加到QML组件中并且不需要属性更改通知的方法，那么“脚本实例”就可以了。