【QML】QML和C++混合开发（01） - 将C++类公开给QML

一、引言

QML应用程序通常需要用C++来处理更高级和性能密集型的任务。最常见、最便捷的方法是：向QML运行时环境公开C++类（注意：该类必须派生自QObject），在Qt 5.7或更高版本下，本文将分享和总结如何在QML应用程序中使用C++类。

【主题】：
（1）在qml中访问C++类中的数据。

二、具体步骤总结

1、创建一个C++类：Datas类

//datas.h

#ifndef DATAS_H
#define DATAS_H

#include <QObject>

#include <QString>

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

datas.cpp

#include "datas.h"

Datas::Datas(QObject *parent) : QObject(parent),
    m_age("25")
{
}

在C++类中使用Q_PROPERTY宏进行声明了一个可以从QML访问的属性，这里是m_age 属性；并声明了读、写改属性的方法：getAge（）和 setAge（）；同时也声明了该属性改变时关联的信号：ageChanged（）

Q_PROPERTY(QString m_age READ getAge WRITE setAge NOTIFY ageChanged)

2、注册C++类

main.c

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <datas.h>

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();
}

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

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

3、在QML中使用C++类中声明的数据。

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
    }
}

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

4、效果

5、总结

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

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

最后就可以在QML中使用啦，哈哈！！