在Qt中实现C++与QML的交互_qml和c++互相调用

---

在Qt中实现C++与QML的交互

Qt是一个功能强大的跨平台应用程序开发框架，支持同时使用C++和QML来开发应用程序。通过C++与QML的交互，我们可以实现更灵活、更强大的应用程序。本文将详细介绍如何在Qt中创建自定义对象、在QML端发送信号并绑定到C++端、在C++端发送信号并绑定到QML端、以及实现QML端直接调用C++端函数和C++端直接调用QML端函数的方法。

1、创建自定义对象

在Qt中，我们可以使用QObject作为基类创建自定义对象。首先，我们需要在C++中定义一个继承自QObject的类，并将其注册到QML中，使得QML可以访问到这个对象。具体的步骤如下：

1. 创建一个新的C++类，例如MyObject，并继承自QObject。
2. 在MyObject类中声明需要在QML中访问的属性和函数，并使用Q_PROPERTY和Q_INVOKABLE宏进行标记。
3. 在MyObject类中添加需要在QML中访问的信号，并使用Q_SIGNAL宏进行标记。
4. 在MyObject类中添加相应的槽函数，并在函数实现中处理信号的逻辑。
5. 在Qt的主程序中，使用qmlRegisterType函数将MyObject类注册到QML引擎中。

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT   
    // 宏标记
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    
public:
    explicit MyObject(QObject *parent = nullptr);
    
    int value() const;
    void setValue(int newValue);
signals:
    void valueChanged(int newValue);

public slots:
    void handleButtonClicked();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// MyObject.cpp

#include "MyObject.h"

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

int MyObject::value() const
{
    return m_value;
}

void MyObject::setValue(int newValue)
{
    if (m_value != newValue) {
        m_value = newValue;
        emit valueChanged(m_value);
    }
}

void MyObject::handleButtonClicked()
{
    // 处理按钮点击逻辑
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "MyObject.h"

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

    // 注册自定义对象到QML
    qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上述代码中，我们创建了一个名为MyObject的自定义对象，并将其注册到QML中。在QML中，可以通过import MyObject 1.0语句引入这个自定义对象，并使用MyObject来创建实例。

// main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

import MyObject 1.0   // 导入自定义类

Window {
    visible: true
    width: screenW
    height: 480
    title: qsTr("Hello World")
  	
  	// 使用
  	MyObject {
		id : myobj
		console.log(myobj.value)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、在QML中发送信号并绑定到C++端

1. 在QML中定义一个信号，使用signal关键字标记。

// MyItem.qml

import QtQuick 2.15

Item {
    signal mySignal(string message)   // 定义信号

    // ...
}
1
2
3
4
5
6
7
8
9

2. 在需要触发信号的地方，调用signal关键字标记的函数，并传递相应的参数。

// MyItem.qml

Button {
    text: "Send Signal"
    onClicked: {
        mySignal("Hello from QML")    // 点击按钮出触发信号
    }
}
1
2
3
4
5
6
7
8

3. 在C++中，连接QML中的信号到相应的槽函数，以便在信号被触发时执行相应的操作。

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
public:
    explicit MyObject(QObject *parent = nullptr);

public slots:
    void handleSignal(QString message);    // 接受信号的槽函数
};
1
2
3
4
5
6
7
8
9
10
11
12
13

// MyObject.cpp

#include "MyObject.h"

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

void MyObject::handleSignal(QString message)
{
    // 处理接收到的信号
    qDebug() << "Received signal from QML:" << message;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 在Qt的主程序中，注册自定义类

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "MyObject.h"

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

    QQmlApplicationEngine engine;

    MyObject myObject; // 创建C++对象

    // 注册自定义对象到QML
    qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject");
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5. 在QML中，使用Connections元素将信号与C++槽函数进行绑定。

// main.qml

import QtQuick 2.15

Item {
   // 信号连接
    Connections {
        target: myItem
        onMySignal: {
            myObject.handleSignal(message)
        }
    }

    MyItem {
        id: myItem
        
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上述代码中，我们在QML的MyItem中定义了一个名为mySignal的信号。在按钮被点击时，我们调用了mySignal函数并传递了一个参数。在C++中，我们创建了一个名为MyObject的对象，并在main.qml中将其注册为myObject。然后，在Connections元素中，我们将myItem的mySignal信号与myObject的handleSignal槽函数进行绑定，以便在信号被触发时调用相应的槽函数。

这样，当在QML中触发mySignal信号时，会调用myObject的handleSignal槽函数，并将相应的参数传递给它。

这样完成了在QML端发送信号并绑定到C++端的过程

3、在C++端发送信号并绑定到QML端

在C++中，我们可以通过定义信号并在特定事件发生时发送信号，然后将这些信号与QML端的函数进行绑定。具体的步骤如下：

1. 在C++的自定义对象中定义信号，并使用Q_SIGNAL宏进行标记。
2. 在需要触发信号的地方，调用emit关键字标记的函数发送信号。
3. 在QML中，使用Connections元素将C++的信号与QML的函数进行绑定。

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    
public:
    explicit MyObject(QObject *parent = nullptr);

    int value() const;
    void setValue(int newValue);

signals:
    void valueChanged(int newValue);
    void buttonClicked();

public slots:
    void handleButtonClicked();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// MyObject.cpp

#include "MyObject.h"

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

int MyObject::value() const
{
    return m_value;
}

void MyObject::setValue(int newValue)
{
    if (m_value != newValue) {
        m_value = newValue;
        emit valueChanged(m_value);
    }
}

void MyObject::handleButtonClicked()
{
	// 发送信号
    emit buttonClicked();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// main.qml

import

 QtQuick 2.15
import com.example 1.0

Item {
    width: 400
    height: 300

	// 信号连接
    Connections {
        target: myObject
        onButtonClicked: {
            console.log("Button clicked");
        }
    }

    MyObject {
        id: myObject
        onValueChanged: {
            console.log("New value:", newValue);
        }
    }

    Button {
        text: "Click me"
        onClicked: {
            myObject.handleButtonClicked();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

在上述代码中，我们在MyObject对象的handleButtonClicked函数中发射了一个名为buttonClicked的信号。在QML中，使用Connections元素将buttonClicked信号与相应的处理函数进行绑定。

4、QML端直接调用C++端函数

在QML中，我们可以直接调用C++端的函数，以便在应用程序的逻辑中实现更高级的功能。具体的步骤如下：

1. 在C++的自定义对象中声明需要在QML中访问的函数，并使用Q_INVOKABLE宏进行标记。
2. 在QML中，通过直接引用C++对象的属性和函数的方式来调用这些函数。

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    
public:
    explicit MyObject(QObject *parent = nullptr);

    int value() const;
    void setValue(int newValue);

    Q_INVOKABLE void cppFunction();

signals:
    void valueChanged(int newValue);

public slots:
    void handleButtonClicked();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// main.qml

import QtQuick 2.15
import com.example 1.0

Item {
    width: 400
    height: 300

    MyObject {
        id: myObject
        onValueChanged: {
            console.log("New value:", newValue);
        }
    }

    Button {
        text: "Click me"
        onClicked: {
            myObject.handleButtonClicked();
            myObject.cppFunction();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在上述代码中，我们在MyObject对象中声明了一个名为cppFunction的函数，它被标记为可在QML中调用。在QML中，通过myObject.cppFunction()的方式来调用这个函数。

5、C++端直接调用QML端函数

在C++中，我们可以直接调用QML中定义的函数，以便在应用程序的逻辑中实现更高级的功能。具体的步骤如下：

1. 在QML中，使用QtObject元素为QML文件中的函数创建一个对象，并给这个对象设置一个id。
2. 在C++中，使用QVariant和QMetaObject来调用QML中定义的函数。

// main.qml

import QtQuick 2.15

QtObject {
    id: qmlFunctions

    function qmlFunction() {
        console.log("QML function called");
    }
}
1
2
3
4
5
6
7
8
9
10
11

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QMetaObject>
#include <QMetaMethod>

int main(int argc, char *argv[])
{
    Q

GuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    // 调用QML中的函数
    QObject* rootObject = engine.rootObjects().first();
    QObject* qmlFunctions = rootObject->findChild<QObject*>("qmlFunctions");
    if (qmlFunctions) {
        const QMetaObject* metaObject = qmlFunctions->metaObject();
        int index = metaObject->indexOfMethod("qmlFunction()");
        if (index != -1) {
            QMetaMethod method = metaObject->method(index);
            method.invoke(qmlFunctions);
        }
    }

    return app.exec();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在上述代码中，我们在QML中使用了QtObject元素来定义了一个名为qmlFunction的函数。在C++中，我们使用QMetaObject和QMetaMethod来调用这个函数。

6、结论

通过C++与QML的交互，我们可以创建自定义对象，并在C++与QML之间实现信号的发送和绑定。我们还可以在QML端直接调用C++端的函数，以及在C++端直接调用QML端的函数。这种交互使得我们可以更加灵活地开发应用程序，并实现更高级的功能。

希望本文对你理解如何在Qt中实现C++与QML的交互有所帮助！