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中访问。 运行界面：
