QML与C++交互

Qt Quick 是一种高级用户界面技术，使用它可轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻量级应用程序。三种全新的技术共同构成了 Qt Quick 用户界面创建工具包：一个改进的Qt Creator IDE、一种新增的简便易学的语言 (QML) 和一个新加入 Qt 库中名为 QtDeclarative 的模块即Qt Declarative UI，这些使得 Qt 更加便于不熟悉 C++ 的开发人员和设计人员使用。

研究了几天QML，我想编程人员最关心的还是QML怎样与C++ Application交互了。发现网上QT中文资料很少，唉，只能参照官网文档:



一、QML引用C++对象

//main cpp

#include <QApplication>
#include <QDeclarativeView>
#include <QDeclarativeContext>

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

QDeclarativeView view;
QDeclarativeContext *context = view.rootContext();
context->setContextProperty("backgroundColor", QColor(Qt::yellow));
view.setSource(QUrl::fromLocalFile("main.qml"));
view.show();

return app.exec();
}

//main.qml

import Qt 4.7

Rectangle {
width: 300
height: 300

color: backgroundColor

Text {
anchors.centerIn: parent
text: "Hello Yellow World!"
}
}

对于C++中自定义的类：

//main cpp

#include <QApplication>
#include <QDeclarativeView>
#include <QDeclarativeContext>

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

QDeclarativeView view;
view.rootContext()->setContextProperty("palette", new CustomPalette);

view.setSource(QUrl::fromLocalFile("main.qml"));
view.show();

return app.exec();
}

//main.qml

import Qt 4.7

Rectangle {
width: 240
height: 320
color: palette.background //调用C++的类

Text {
anchors.centerIn: parent
color: palette.text
text: "Click me to change color!"
}

MouseArea {
anchors.fill: parent
onClicked: {
palette.text = "blue";
}
}
}

二、QML，C++方法相互调用

新建类:

//numbercount.h

#ifndef NumberCount_H
#define NumberCount_H

#include <QObject>
#include <QVariant>

class NumberCount : public QObject
{
Q_OBJECT
public:
explicit NumberCount(QObject *parent = 0);
Q_INVOKABLE int getTotal();

signals:
void resetData(QVariant num);//用于调用qml的javascript 方法
public slots:
int incre();
int decre();
void reset(int num);

private:
int count;
int total;
};

#endif // NumberCount_H

//==========================================================

//NumberCount.cpp

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

NumberCount::NumberCount(QObject *parent) :
QObject(parent)
{
this->total = 100;
}

int NumberCount::incre()
{
qDebug()<<"count=: "<< ++total;
count++;
return count;

}

int NumberCount::decre()
{
qDebug()<<"count=: "<< --total;
count--;
return count;
}

void NumberCount::reset(int num)
{
this->total = num;
count = 0;
emit resetData(QVariant(num));//调用qml的javascript 方法
}

int NumberCount::getTotal()
{
return total;
}

//==========================================================

//numbercount.qml

import Qt 4.7

Rectangle {
//signal resetData;
function resetData(text){
console.log("javascript resetData方法被C++调用!");
btn_decre.text = "增加<font color='#0000FF'>(0)</font>";
btn_incre.text = "减少<font color='#0000FF'>(0)</font>";
txt_show.text = "总数:" + text;
txt_reset.text = "总数重置为:"+text;
}

width: 300
height: 300
radius: 20
anchors.fill: parent

Text {
id: txt_show
x: 150
y: 0
text : "总数:" + numberCount.getTotal(100);
}

Rectangle{
x:100
y:50
width: 80
height: 25
Image{
anchors.fill: parent
width:parent.width
height: parent.width
source: "/ui/images/button.png"
}
Text {
id: btn_incre
anchors.centerIn: parent
text: "增加"
MouseArea{
anchors.fill: parent
onClicked: {
var num = numberCount.incre();
parent.text = "增加<font color='#0000FF'>(" + num +")</font>";
btn_decre.text = "减少<font color='#0000FF'>("+ num+")</font>";
txt_show.text = "总数:" + numberCount.getTotal();
}
}
}
}

Rectangle{
x:100
y:100
width: 80
height: 25
Image{
anchors.fill: parent
width:parent.width
height: parent.width
source: "/ui/images/button.png"
}
Text {
id: btn_decre
anchors.centerIn: parent
text: "减少"
MouseArea{
anchors.fill: parent
onClicked: {
var num = numberCount.decre();
parent.text = "减少<font color='#0000FF'>(" + num +")</font>";
btn_incre.text = "增加<font color='#0000FF'>("+ num+")</font>";
txt_show.text = "总数:" + numberCount.getTotal();
}
}
}
}

Rectangle{
x:100
y:150
width: 80
height: 25
Image{
anchors.fill: parent
width:parent.width
height: parent.width
source: "/ui/images/button.png"
}
Text {
id: btn_show
anchors.centerIn: parent
text: "重置总数"
MouseArea{
anchors.fill: parent
onClicked: {
numberCount.reset(200);
}
}
}
}

Text {
id: txt_reset
x: 100
y: 200
color: "#12ff12"
}

}

//==========================================================

//qml.qrc

<RCC>
<qresource prefix="/ui">
<file alias="qml/qml_main">Auto_Order_UI.qml</file>
<file>images/Alert_09.png</file>
<file>images/Alert_10.png</file>
<file>images/Alert_11.png</file>
<file>images/Alert_12.png</file>
<file>images/Alert_13.png</file>
<file>images/Alert_14.png</file>
<file>images/Alert_15.png</file>
<file>images/Alert_16.png</file>
<file>images/carmageddon2.png</file>
<file>images/counter-strike.png</file>
<file>images/X3.png</file>
<file alias="qml/qml_sw">sw.qml</file>
<file>images/button.png</file>
</qresource>
</RCC>

//==========================================================

//main.cpp

#include <QtGui/QApplication>
#include "mainwindow.h"
#include <QtDeclarative/QDeclarativeView>
#include <QtDeclarative/QDeclarativeComponent>
#include <QtDeclarative/QDeclarativeItem>
#include <QtDeclarative/QDeclarativeEngine>
#include <QtDeclarative/QDeclarativeContext>
#include "numbercount.h"

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
NumberCount *numberCount = new NumberCount();
QDeclarativeContext *context = view.rootContext();
context->setContextProperty("numberCount",numberCount);//注册C++对象到qml
view.setSource(QUrl("qrc:/ui/qml/qml_sw"));
QObject *rootObject = dynamic_cast<QObject*>(view.rootObject());
QObject::connect(numberCount, SIGNAL(resetData(QVariant)), rootObject, SLOT(resetData(QVariant)));//将C++信号与QML槽关联

view.show();
return a.exec();
}

官方文档：

It is possible to call methods of QObject derived types by either exposing the methods as public slots, or by marking the methods Q_INVOKABLE .

也就是说 getTotal()和incre()都能在QML中访问。

运行界面：