【qml】QML与C++混合开发总结

一、引言

在QtQuick开发中，QML应用程序通常需要用C++来处理高级和性能密集型的任务。为了实现这一点，最常见、最便捷的方法是：向QML运行时环境公开C++类（注意：该C++类必须派生自QObject），在Qt 5.7或更高版本中，本文将描述以下两个问题：

（1）如何在QML应用程序中使用C++类。

（2）向QML导出C++方法（包括槽函数）

二、如何在QML应用程序中使用C++类

（2-1）创建一个C++类：class Datas

//datas.h 头文件
#ifndef DATAS_H
#define DATAS_H

#include 

#include 

class Datas : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString m_age READ getAge WRITE setAge NOTIFY ageChanged)
public:
    explicit Datas(QObject *parent = nullptr);

    QString getAge(){
        return m_age;
    }

    void setAge(const QString &age)
    {
        m_age = age;
        emit ageChanged();
    }

signals:
    void ageChanged();

private:
    QString m_age;
};

#endif // DATAS_H
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

//datas.cpp

#include "datas.h"

Datas::Datas(QObject *parent) : QObject(parent),
    m_age("25")
{
}
1
2
3
4
5
6
7
8

上述代码中，在C++类中使用Q_PROPERTY宏声明了一个可以从QML访问的属性，这里是m_age属性；并声明了读、写该属性的方法：getAge()和setAge()；同时声明了该属性改变时所发出的信号：ageChanged()：

Q_PROPERTY(QString m_age READ getAge WRITE setAge NOTIFY ageChanged)
1

（2-2）注册C++类

在上述步骤中，我们定义了一个C++类，为了在QML环境中使用该类，需要将它注册到QML上下文环境中：

//main.c

#include 
#include 
#include 
#include 

int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    Datas m_datas;

    QQmlContext *qmlctx = engine.rootContext();

    qmlctx->setContextProperty("cpp_datas",&m_datas);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    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
31

使用QQmlContex的setContextProperty()成员函数向QML运行上下文环境注册C++类型，如下：

    Datas m_datas;
    QQmlContext *qmlctx = engine.rootContext();
    qmlctx->setContextProperty("cpp_datas",&m_datas);	//注册m_datas
1
2
3

（2-3）在QML中使用C++类中声明的数据。

在main.c文件中，我们已经将Datas类的实例m_datas注册到到了QML运行上下文环境中，接下来，我们则可以在QML中使用该类中声明的数据了：

//main.qml文件

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 640
    height: 480
    visible: true
    color: "#117c90"
    title: qsTr("演示 | Author：iriczhao")

    Button {
        id: button
        x: 270
        y: 345
        text: qsTr("Click")

        onClicked: 
        {
            label.text = cpp_datas.m_age;
        }
    }

    Label {
        id: label
        x: 168
        y: 134
        width: 305
        height: 45
        color: "#ffffff"
        text: qsTr("iriczhao")
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.bold: true
    }
}
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
34
35
36
37

如上代码所示，在应用中放置了一个Button和Label，当点击Button后，Label标签的文本属性将被C++类中的m_age赋值。即应用界面将显示25。

（2-4）效果

三、向QML导出C++方法（包括槽函数）

在上文中，描述了如何向QML公开C++类的数据属性。那么对于C++类的方法同样也能公开给QML。具体步骤如下：

（3-1）声明C++成员函数

对于QObject派生类型的所有方法都可以从QML代码中访问。例如：

（1）使用```Q_INVOKABLE``宏标记的公共方法。

（2）Qt C++公共槽函数。

如下代码片段：

class MessageBoard : public QObject{
Q_OBJECT
public:
    Q_INVOKABLE bool postMessage(const QString &msg) {
        qDebug() << "Called the C++ method with" << msg;
        return true;
    }
public slots:  
    void refresh() {
        qDebug() << "Called the C++ slot";
	}
};
1
2
3
4
5
6
7
8
9
10
11
12

postMessage()函数使用Q_INVOKABLE标记；refresh()函数是一个公共槽函数，所以这两个函数都能从QML中访问。

（3-2）注册C++类

同样的，为了使用C++类中的方法（包括槽函数），需要将C++类注册到QML上下文环境中（这里是MessageBoard类）：

MessageBoard msgBoard; //实例MessageBoard 
 
view.engine()->rootContext()->setContextProperty("cpp_msgBoard", &msgBoard); //将msgBoard注册到QML上下文环境中
1
2
3

（3-3）在QML中使用C++类的方法

如下代码片段：

import QtQuick 2.0
Item {
    width: 100; height: 100
    MouseArea {
        anchors.fill: parent
        onClicked: {
            var result = msgBoard.postMessage("Hello from QML")
            console.log("Result of postMessage():", result)
            msgBoard.refresh();
	}
}
1
2
3
4
5
6
7
8
9
10
11

上述代码中，使用msgBoard调用postMessage()和refresh()方法访问到了C++类中的方法。

四、总结

（1）如果需要在QML中访问C++类中的数据成员。需要使用Q_PROPERTY声明该数据成员，并声明对数据成员的读、写函数以及数据改变时的关联信号。

然后使用QQmlContex的setContextProperty()将C++类注册到QML上下文中。

（2）如果需要在QML中访问C++方法（包括槽函数），这里分为两种情况：

• 如果该函数是一个公共函数，我们需要使用Q_INVOKABLE宏去标记它。
• 如果是一个公共的槽函数，则可以直接访问。

同样的，使用QQmlContex的setContextProperty()将C++类注册到QML上下文中。