---

【極客技術(shù)傳送門(mén)】 : https://blog.csdn.net/Engineer_LU/article/details/135149485

---

1 . 前言

Qml與C++通信有以下思路

• Qml調(diào)用C++的變量
• Qml調(diào)用C++的類(lèi)
• Qml調(diào)用C++的方法
• Qml接收C++的信號(hào)
• C++調(diào)用Qml的方法
• C++接收Qml的信號(hào)

2 . Qml調(diào)用C++的變量

C++代碼如下 ：

int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.rootContext()->setContextProperty("HEIGHT",500);engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

Qml代碼如下 ：

Window {id: windowvisible: truewidth: 300height: HEIGHTtitle: qsTr("Hello World")Component.onCompleted: {console.log(window.width)}Button{width: 100height: 100background: {color:"black"}}
}

小結(jié) ：

1. 以上代碼的思路是C++通過(guò)engine.rootContext()->setContextProperty(“HEIGHT”,500);向Qml引擎注冊(cè)一個(gè)HEIGHT名字變量，其中這里的500可以寫(xiě)成C++的變量，使其映射HEIGHT名字變量，然后就可以在Qml文件中訪問(wèn)HEIGHT該變量了

---

3 . Qml調(diào)用C++的類(lèi)

C++代碼如下 ：

#ifndef MYOBJECT_H
#define MYOBJECT_H#include <QObject>
#include <QtQml>class MyObject : public QObject
{Q_OBJECTQ_PROPERTY(int value READ getValue WRITE setValue NOTIFY valueChanged)Q_PROPERTY(QString str READ getStr WRITE setStr NOTIFY strChanged)
public:explicit MyObject(QObject *parent = nullptr);public:void setValue(int newValue);int getValue();void setStr(QString newStr);QString getStr();signals:void valueChanged();void strChanged();private:int m_value;QString m_str;
};#endif // MYOBJECT_H#include "MyObject.h"MyObject::MyObject(QObject *parent) : QObject(parent)
{}void MyObject::setValue(int newValue)
{if(newValue == m_value)return;m_value = newValue;emit valueChanged();
}int MyObject::getValue()
{return m_value;
}void MyObject::setStr(QString newStr)
{if(newStr == m_str)return;m_str = newStr;emit strChanged();
}QString MyObject::getStr()
{return m_str;
}

int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject");engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

Qml代碼如下 ：

import MyObject 1.0Window {id: windowvisible: truewidth: 400height: 500title: qsTr("Hello World")MyObject{value: 10str: "zhangsan"onValueChanged: {}onStrChanged: {}Component.onCompleted: {console.log(value,str)}}
}

小結(jié) ：

1. 以上代碼的思路是C++通過(guò) qmlRegisterType<類(lèi)名>(“Qml調(diào)用的類(lèi)名稱”,版本,“類(lèi)名”); 例如上述的 qmlRegisterType(“MyObject”, 1, 0, “MyObject”); 向Qml注冊(cè)一個(gè)類(lèi)，使Qml可以基于這個(gè)類(lèi)在Qml中創(chuàng)建對(duì)象。
2. 其中C++類(lèi)中要聲明Q_OBJECT
3. Q_PROPERTY(int value READ getValue WRITE setValue NOTIFY valueChanged)
   這個(gè)是屬性注冊(cè)接口，其中注冊(cè)了《讀》《寫(xiě)》《信號(hào)》三個(gè)接口，其中Qml可以 讀取/寫(xiě)入 C++的類(lèi)成員變量，信號(hào)是C++調(diào)用后，Qml中用onValueChanged: {}作為槽
4. int getValue();
   void setValue(int newValue);
   這兩個(gè)是根據(jù)第3點(diǎn)的屬性注冊(cè)綁定的讀寫(xiě)接口
5. signals:
   void valueChanged();
   這個(gè)是根據(jù)第3點(diǎn)的屬性注冊(cè)綁定的信號(hào)接口，emit valueChanged(); 這樣在C++調(diào)用后，就會(huì)發(fā)送信號(hào)，Qml中 onValueChanged: {} 觸發(fā)響應(yīng)接收

---

4 . Qml調(diào)用C++的方法

C++代碼如下 ：

#ifndef MYOBJECT_H
#define MYOBJECT_H#include <QObject>
#include <QtQml>class MyObject : public QObject
{Q_OBJECTQ_PROPERTY(int value READ getValue WRITE setValue NOTIFY valueChanged)Q_PROPERTY(QString str READ getStr WRITE setStr NOTIFY strChanged)
public:explicit MyObject(QObject *parent = nullptr);public:Q_INVOKABLE void printMsg();void setValue(int newValue);int getValue();void setStr(QString newStr);QString getStr();signals:void valueChanged();void strChanged();private:int m_value;QString m_str;
};#endif // MYOBJECT_H#include "MyObject.h"MyObject::MyObject(QObject *parent) : QObject(parent)
{}void MyObject::setValue(int newValue)
{if(newValue == m_value)return;m_value = newValue;emit valueChanged();
}int MyObject::getValue()
{return m_value;
}void MyObject::setStr(QString newStr)
{if(newStr == m_str)return;m_str = newStr;emit strChanged();
}QString MyObject::getStr()
{return m_str;
}

int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject");engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

Qml代碼如下 ：

import MyObject 1.0Window {id: windowvisible: truewidth: 400height: 500title: qsTr("Hello World")MyObject{id: objvalue: 10str: "zhangsan"}Button{width: 50height: 50background: Rectangle{color:"red"}onClicked: {obj.printMsg()}}
}

小結(jié) ：

1. public:
   Q_INVOKABLE void printMsg();
   這句話基于Qml調(diào)用C++的類(lèi)交互的基礎(chǔ)上增加，這樣可以使得Qml創(chuàng)建對(duì)象后，可以調(diào)用C++類(lèi)的方法

---

5 . Qml接收C++的信號(hào)

C++的代碼如下

signals:void sigMsg(int value,QString name);//在C++中調(diào)用 emit sigMsg(xxx,"xxx");

Qml的代碼如下

MyObject{   id : obj}Connections{  //信號(hào)-槽連接方式一target: objfunction onSigMsg(i,s){console.log("/*-----------收到信號(hào)----------*/")}
}

小結(jié) ：

1. C++的類(lèi)中定義信號(hào)，然后把類(lèi)注冊(cè)后，在Qml創(chuàng)建該類(lèi)對(duì)象，用Connections把對(duì)象和onSigMsg(捕獲類(lèi)的信號(hào))進(jìn)行連接，Qml捕獲信號(hào)的名字由C++類(lèi)信號(hào)的名字前綴+on，后面首字母大寫(xiě)

6 . C++接收Qml的信號(hào)（在Qml中定義信號(hào)槽）

C++的代碼如下

public slots:void slotMsg(int value,QString name);//實(shí)現(xiàn)
void MyObject::slotMsg(int value,QString name)
{qDebug()<<__FUNCTION__<<" value = "<<value<<" name ="<<name;
}

Qml的代碼如下

Window {id: windowvisible: truewidth: 400height: 500title: qsTr("Hello World")signal sendMsg(int value,string name)   //增加信號(hào)MyObject{id: objvalue: 10str: "zhangsan"}Button{width: 50height: 50background: Rectangle{color:"red"}onClicked: {sendMsg(2,"zhangsan")}}Component.onCompleted: {    //信號(hào)-槽連接方式二sendMsg.connect(obj.slotMsg)}
}

小結(jié) ：

1. 在Qml創(chuàng)建完畢之后把Qml的信號(hào)sendMsg連接到C++的類(lèi)槽函數(shù)之中，這樣在Qml完成Qml信號(hào)C++槽綁定。

7 . C++接收Qml的信號(hào)（在C++中定義信號(hào)槽）

Qml的代碼如下

Window {id: windowobjectName: "window"visible: truewidth: 400height: 500title: qsTr("Hello World")
}

C++的代碼如下

    QQmlApplicationEngine engine;qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject");engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;auto objs = engine.rootObjects();qDebug()<<objs.first()->objectName();

    MyObject *myobj = new MyObject();auto objs = engine.rootObjects();auto window = objs.first();qDebug()<<objs.first()->objectName();QObject::connect(window,SIGNAL(sendMsg(int,QString)),myobj,SLOT(slotMsg(int,QString)));

小結(jié) ：

1. Qml的第一個(gè)對(duì)象就是window，那么在C++中通過(guò)找到window的首地址，就可以基于這個(gè)首地址進(jìn)行信號(hào)槽綁定，這樣在C++完成Qml信號(hào)C++槽綁定。

8 . C++調(diào)用Qml的函數(shù)

Qml的代碼如下

    function test(value,name){  //供C++端調(diào)用的函數(shù)console.log("test ",value,name)}

C++的代碼如下

    QVariant ret;QVariant arg1 = 123;QVariant arg2 = "zhangsan";QMetaObject::invokeMethod(window,"test",Q_RETURN_ARG(QVariant,ret),Q_ARG(QVariant,arg1),Q_ARG(QVariant,arg2));

小結(jié) ：

1. 在Qml中創(chuàng)建一個(gè)test函數(shù)，在C++中通過(guò)元對(duì)象方法 QMetaObject::invokeMethod 來(lái)綁定調(diào)用Qml中的test函數(shù)，從而使得Qml可以接收C++的任意類(lèi)型數(shù)據(jù)。

9 . 總結(jié)

以上描述了C++與QML數(shù)據(jù)交互的方式，大家可以根據(jù)以上方式擴(kuò)展，模擬MVVM的模式代入框架實(shí)現(xiàn)簡(jiǎn)潔高效的前后端架構(gòu)，謝謝觀看。

技術(shù)交流QQ群 : 745662457
群內(nèi)專注 - 問(wèn)題答疑，項(xiàng)目外包，技術(shù)研究