如何动态向 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 文档。不过我写了一个简短的例子来演示它的用法。

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 组件实例都将使用脚本中声明的自己的全局变量副本。

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

有

import "PageStack.js" as Engine

语句，后来指的是调用使用全局变量的函数，就像是实例变量一样。

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

Answer 3

也许你可以这样做：

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

Answer 4

对于大多数 qml 项目/对象，它们继承 QtObject，其内部是 QObject。

您想用 C++ 创建静态 QML 单例（https://doc.qt.io/qt-6/qtqml-cppintegration-definetypes.html） 实现一个功能

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

并至少调用一次。 这将创建一个功能齐全的 qobject/qml 属性，您可以像往常一样在 qt/qml 中的任何地方使用。

Answer 5

我不确定是否可以向 qml 对象添加动态属性，购买一种最简单的形式是禁用、隐藏或更改属性，例如：

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

或者您可以创建项目的动态组件或使用加载器元素更改视图。