我們知道, 在QML中我們可以很容易地呼叫C++程式碼. 同樣, 我們可以在C++中呼叫放在QML中的Javascript程式碼. 由於存在函式/方法之間的呼叫, 資料型別之間的轉換是比不可少的．在今天的文章中，我們來簡單地介紹一下如何互相呼叫及一些型別的轉換．

如何從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" :  "
 
[email protected]",
                    "to" :  "[email protected]",
                    "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" :  "[email protected]",
                    "to" :  "[email protected]",
                    "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 "[email protected]"
map.to "[email protected]"
map.message "This is teriffic!"

整個應用的介面為：