QML学习笔记（五十三）QML与C++交互：数据转换——序列类型与 JavaScript 数组的转换

Larry_Yanan2025-11-07 14:34

前言

本节介绍一下序列类型和数组之间的转换，简单来说就是C++的QVetor和qml中的数组之间的转换。

一、代码示例

只展示核心代码：

cpp 复制代码

class CppClass : public QObject
{
    Q_OBJECT

public:
    explicit CppClass(QObject *parent = nullptr);

    Q_INVOKABLE void qmlArrayToCpp(QVector<QString> vector);
    Q_INVOKABLE QVector<QString> retrieveStrings();
private:
    QVector<QString> mVector;
};

cpp 复制代码

#include "cppclass.h"
#include <QDebug>

CppClass::CppClass(QObject *parent) : QObject(parent)
{
    mVector.append("One");
    mVector.append("Two");
    mVector.append("Three");
    mVector.append("Four");
}

void CppClass::qmlArrayToCpp(QVector<QString> vector)
{
    foreach (QString string, vector){
        qDebug()<< string;
    }
}

QVector<QString> CppClass::retrieveStrings()
{
    return mVector;
}

cpp 复制代码

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.12
import com.mycompany 1.0

Window {
	// ...
    CppClass{
        id: cppClassId
    }

    Button{
        id: buttonId
    }
    Button{
        id:button1Id
        text:"Send to C++"
        x: buttonId.x + buttonId.width
        onClicked:function(){
            var arr = ['Apple', 'Banana','Avocado','Pear','Orange'];
            cppClassId.qmlArrayToCpp(arr)
        }
    }
    Button{
        id: button2Id
        text:"Read form C++"
        anchors.left: button1Id.right
        onClicked:function(){
            var arr = cppClassId.retrieveStrings()
            print("The length of the array is:"+ arr.length)
            arr.forEach(function(element){
                console.log(element)
            })
        }
    }
}

打印：

可以看到，其实并不需要什么特殊处理的转换，qt会自动匹配转换的。

二、总结

这种数组和序列的数据是很常见的变量，从C++发送到qml进行前端展示，或者从qml端搜集后要发送到C++端进行存储和管理都是很常见的需求。