QML和C++代码之间互相调用及参数之间的转换

我们知道, 在QML中我们可以很容易地调用C++代码. 同样, 我们可以在C++中调用放在QML中的Javascript代码. 由于存在函数/方法之间的调用, 数据类型之间的转换是比不可少的．在今天的文章中，我们来简单地介绍一下如何互相调用及一些类型的转换．

我们可以在文章＂QML Basic Types＂及＂Data Type Conversion Between QML
and C++＂中得到更多的信息．

如何从C++中调用QML中的Javascript代码

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

#include <QDate>
#include <QMetaObject>
#include <QVariant>
#include <QArgument>
#include <QQuickItem>
#include <QQmlContext>

#include "cmyclass.h"

int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);

QQuickView view;
view.setSource(QUrl(QStringLiteral("qrc:///Main.qml")));
view.setResizeMode(QQuickView::SizeRootObjectToView);

QVariantList list;
list << 10 << QColor(Qt::green) << "bottles";

QVariantMap map;
map.insert("language", "QML");
map.insert("released", QDate(2010, 9, 21));

QMetaObject::invokeMethod(view.rootObject(), "readValues",
Q_ARG(QVariant, QVariant::fromValue(list)),
Q_ARG(QVariant, QVariant::fromValue(map)));

MyClass myclass;
view.rootContext()->setContextProperty("myclass", &myclass);
view.show();
return app.exec();
}

在上面的代码中，我们可以看到．我们通过如下的方法：

QMetaObject::invokeMethod(view.rootObject(), "readValues",
Q_ARG(QVariant, QVariant::fromValue(list)),
Q_ARG(QVariant, QVariant::fromValue(map)));

调用一个在Main.qml中定义的一个叫做readValues()的Javascript方法：

import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "dataconversion.liu-xiao-guo"

/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true

// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false

width: units.gu(60)
height: units.gu(85)

function readValues(anArray, anObject) {
for (var i = 0; i < anArray.length; i++ )
console.log("Array item:", anArray[ i ])

for (var prop in anObject) {
console.log("Object item:", prop, "=", anObject[prop])
}
}

Page {
title: i18n.tr("dataconversion")

Button {
anchors.centerIn: parent

text: "Call C++ to pass array and object"

onClicked: {
var i = {
"from" :  "xiaoguo.liu@company.com",
"to" :  "y@mail.com",
"message" : "This is teriffic!"
};

var j = ["Saab", "Volvo", "BMW"];

myclass.callingFromQml(j, i);
}
}

}
}

上面的输出结果为：

qml: Array item: 10
qml: Array item: #00ff00
qml: Array item: bottles
qml: Object item: language = QML
qml: Object item: released = 周二 9月 21 00:00:00 2010 GMT+0800

我们可以看出来QVariantList被映射到Javascript的Array，而QVariantMap被映射到我们Javacript中的Object．这个概念是非常重要的．我们可以在＂QML Basic Types＂中找到更多的关于类型之间的映射．

同样，我们可以在Javascript中调用一个定义在C++代码中的方法，并把我们所需要的参数传人，进而得到解析．

Button {
anchors.centerIn: parent

text: "Call C++ to pass array and object"

onClicked: {
var i = {
"from" :  "xiaoguo.liu@company.com",
"to" :  "y@mail.com",
"message" : "This is teriffic!"
};

var j = ["Saab", "Volvo", "BMW"];

myclass.callingFromQml(j, i);
}
}

这里myclass是定义在C++中的一个类的实例．我们调用callingFromQml()方法：

void MyClass::callingFromQml(QVariantList list, QVariantMap map) {
qDebug() << "It is called from QML!";

int count = list.count();
qDebug() << "count: " << list.count();
qDebug() << "The array values are: ";

for ( int i = 0; i < count; i++ ) {
QString value = list[i].toString();
qDebug() << "value: " << value;
}

qDebug() << "The object values are: ";

qDebug() << "map.from" << map["from"].toString();
qDebug() << "map.to" << map["to"].toString();
qDebug() << "map.message" << map["message"].toString();
}

这里cmyclass.h定义如下：

cmyclass.h

#ifndef CMYCLASS_H
#define CMYCLASS_H

#include <QObject>
#include <QVariantList>
#include <QVariantMap>

class MyClass : public QObject
{
Q_OBJECT
public:
explicit MyClass(QObject *parent = 0);
Q_INVOKABLE void callingFromQml(QVariantList list, QVariantMap map);

signals:

public slots:

};

#endif // CMYCLASS_H

注意这里的Q_INVOKABLE，表明它是可以在QML中可以调用的．更多关于QML调用调用C++的介绍，请参阅文章＂Exposing Attributes of C++ Types to QML＂．一般来说，QML可以调用C++ QObject类的如下成员：

Properties
Methods (providing they are public slots or flagged with Q_INVOKABLE)
Signals

它的输出为：

It is called from QML!
count:  3
The array values are:
value:  "Saab"
value:  "Volvo"
value:  "BMW"
The object values are:
map.from "xiaoguo.liu@company.com"
map.to "y@mail.com"
map.message "This is teriffic!"

整个应用的界面为：



整个项目的源码在：https://github.com/liu-xiao-guo/dataconversion