qml和c++交互

本文介绍qml和c++交互的两种方式：

• 利用Q_INVOKABLE关键字
• 利用信号槽

1.Q_INVOKABLE关键字

1.1先创建一个和qml交互的c++类CDataClass

头文件

class CDataClass : public QObject
{
    Q_OBJECT
public:
    explicit CDataClass(QObject *parent = nullptr);
    Q_INVOKABLE QVariant testGetData(int count);

private:
    
};

源文件

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

QVariant CDataClass::testGetData(int count)
{
    return QString("传入的数字是：%1").arg(count);
}

1.2在main.cpp中注册

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QApplication app(argc, argv);
    qmlRegisterType<CDataClass>("dataclass", 1, 0, "CDataClass"); // 注册类，Q_INVOKABLE方式调用c++里面函数
    
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

1.3在main.qml中访问

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Dialogs 1.3
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import dataclass 1.0 //自定义的类，用作传数据，给qml使用

Window {
    id: mainwld
    opacity: 1
    width: 960
    height: 540
    title: windowTitle

    CDataClass {
        id: dataclass_id
    }
    
	Component.onCompleted: {
        mainwld.windowTitle = '登录页面';
        console.log(dataclass_id.testGetData(6));
    }
}

运行结果：

qml: 传入的数字是：6

2.信号槽方式

2.1先创建一个和qml交互的c++类CDataClass

头文件

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

signals:
    void testSignalGetData(const QString &data);

public slots:
     void testSlotGetData(const QString &data);
     
private:
    
};

源文件

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

void CDataClass::testSlotGetData(const QString &data)
{
    emit testSignalGetData(data);
}

2.2在main.cpp中注册

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    QApplication app(argc, argv);
    
    QQmlApplicationEngine engine;
    CDataClass dataClass;
    engine.rootContext()->setContextProperty("datacls", &dataClass); // 设置属性，接收c++对象信号
    engine.load(QUrl(QStringLiteral("qrc:/qml/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

2.3在main.qml中访问

import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Dialogs 1.3
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import dataclass 1.0 //自定义的类，用作传数据，给qml使用

Window {
    id: mainwld
    opacity: 1
    width: 960
    height: 540
    title: windowTitle

	function handleTestSignalGetData(data)
    {
        console.log(data);
    }

    Connections
    {
        //qml 连接 c++ 信号
        target: datacls //datacls 要在main.cpp中设置
        onTestSignalGetData: handleTestSignalGetData(data)
    }
    
	Component.onCompleted: {
        mainwld.windowTitle = '登录页面';
        datacls.testSlotGetData("测试qml绑定c++信号");
    }
}

运行结果：

qml: 测试qml绑定c++信号