2014年6月4日 星期三

使用QML與C++ Function溝通 ( Calling C++ Function from QML )

介紹:
  • 如何使用QML與C++ Function溝通
Introduction:
  • How to call c++ function from qml 

開發環境:
  • QT 5.2
  • QtQuick 2.1

【apicontroller.hpp】
#ifndef APICONTROLLER_H
#define APICONTROLLER_H

#include <QObject>

class APIController : public QObject
{
    Q_OBJECT
public:
    explicit APIController(QObject *parent = 0);

    Q_INVOKABLE void setValue(QString sValue);
    Q_INVOKABLE QString getValue();
private:
    QString _sValue;
};

#endif // APICONTROLLER_H

【apicontroller.cpp】
#include "apicontroller.h"
#include <QDebug>

APIController::APIController(QObject *parent) :
    QObject(parent)
{
}

void APIController::setValue(QString sValue)
{
    _sValue = sValue;
    qDebug()<<"Set Value : "<<_sValue;
}

QString APIController::getValue()
{
    qDebug()<<"Get Value : "<<_sValue;
    return _sValue;
}

【main.cpp】
#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
#include <QQmlContext>
#include "apicontroller.h"
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QtQuick2ApplicationViewer viewer;
    APIController *controller = new APIController();
    viewer.rootContext()->setContextProperty("controller", controller);
    viewer.setMainQmlFile(QStringLiteral("qml/QMLClientApp/main.qml"));
    viewer.showExpanded();

    return app.exec();
}

【main.qml】

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        text: qsTr("Calling C++ Function from QML")
        anchors.centerIn: parent
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            controller.setValue("Value")
        }
    }
    Rectangle {
        width: 100
        height: 100
        Text {
            id:txtValue
            text: controller.getValue()
            anchors.centerIn: parent
        }
    }
}

編譯成功後,會顯示以下畫面



0 意見:

張貼留言