QML/Javascript 中的 QVector

Posted 2023-02-16

【中文标题】QML/Javascript 中的 QVector

【英文标题】：QVector inside QML/Javascript

【发布时间】：2012-07-30 12:10:28

【问题描述】：

如何在 QML/javascript 中使用QVector？ 示例：

C++：

我在 QML 中使用的自定义类。该类包含返回注册ElementType的QVector的函数

class CustomType : public QObject

    Q_OBJECT

    public:
        Q_INVOKABLE QVector<ElementType*> getElements(); 
    //.....            

//.........
qmlRegisterType<CustomType>("CustomComponents", 1, 0, "CustomType");
qmlRegisterType<ElementType>("CustomComponents", 1, 0, "ElementType");
qRegisterMetaType<ElementType*>("ElementType*");

QML：

QML 代码接收CustomType 类（自定义）的实例并尝试获取元素的QVector<ElementType*> 并读取其属性。但是QML无法识别QVector类型。

//.......
function()
    var elements = custom.getElements()
    elements[0].property   //?

【参考方案1】：

QML 可访问的列表属性需要使用QDeclarativeListProperty 构造。这适用于所有列表形的东西，也适用于向量。 This part of the Qt documentation有详细信息。

【讨论】：

这不是我所需要的。我添加了： qRegisterMetaType >("QVector");在 QML 我收到这种类型： QVariant(QVector) 那么我如何访问 QVariant 内部？

【参考方案2】：

在您的示例中，您只需要从Q_INVOKABLE 函数返回QObject* 中的QList。请注意，以这种方式返回的所有对象都将拥有 JavaScript 所有权，并且在您的 JavaScript 函数返回时将被垃圾回收。为了防止这种行为，在将对象推入您的QList 集合之前使用setObjectOwnership。 有关在 QML 中使用集合的更多信息，请参阅QML Data Models

【讨论】：

QList 适用于 ListModel，但在我的情况下，我收到 QVariant(QList) 类型的元素，我无法访问 QList

的内部类型>

难道你不尝试从 QObjectList 继承并在你自己的类中添加一些带有索引参数的访问器方法吗？

【参考方案3】：

我迟到了这么多年才回答，但是，就这样吧。这是一个很容易解决的问题。只需在 C++ 代码中使用 Qt QVariantList 类型而不是 QVector。 Qt 的 QVariantList 本质上是一个包含 QVariant 元素的 QVector。一旦你知道你在做什么，QVariants 可以接近任何东西。此外，QML 会自动将 C++ QVariant 转换为其 QML 等效项。因此，如果您在 main.cpp 中执行此操作：

#include <QCoreApplication>
#include <QGuiApplication>
#include <QQmlContext>
#include <QQuickView>

int main(int argc, char *argv[])

    // Prepare to enter the QML GUI world
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    // Create a QVariantList to be used instead of a QVector
    QVariantList dataList;
    dataList << "Item 1";
    dataList << 2;
    dataList << 3.3;

    // Create QML UI
    QQuickView view;

    // make your QVariantList visible to QML
    QQmlContext *ctxt = view.rootContext();
    ctxt->setContextProperty("myModel",
                             QVariant::fromValue(dataList));

    // show QML UI
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();

    return 1;

 // main()

然后您可以在 main.qml 中执行此操作：

import QtQuick 2.12
import QtQuick.Window 2.12

Item

    // Print contents of C++ QVariantList to console
    function printMeBruh()
    
        console.log("modelData contains:")
        console.log("-------------------")

        for (var i = 0; i < 3; i++)
        
            console.log(myModel[i])
        
    

    Component.onCompleted: printMeBruh()