QML与C++交互

来源：互联网发布：spss数据结果分析报告编辑：程序博客网时间：2024/05/17 00:02

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 = "增加(0)";
 btn_incre.text = "减少(0)";
 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 = "增加(" + num +")";
 btn_decre.text = "减少("+ num+")";
 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 = "减少(" + num +")";
 btn_incre.text = "增加("+ num+")";
 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中访问。

运行界面：