当前位置：首页 > article >正文

QML 与C++交互详解

article 2024/12/30 0:52:41

1.基础

在C++中直接定义全局变量，QML中能够直接访问。

使用engine.rootContext()->setContextProperty("WIDTH",300)，设置了一个全局变量WIDTH。

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

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("WIDTH",300);
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

QML中直接访问WIDTH。

Window {
    id: window
    visible: true
    width: WIDTH
    height: 500
    title: qsTr("Hello World")

    Component.onCompleted: {
        console.log(window.width)
    }

    Button{
        width: 100
        height: 100
        background: {
            color:"black"
        }
    }
}

2.QML中调用C++类型

自定义一个C++类 MyObject 对象，有两个成员变量m_value和m_str，分别对应一个set和一个get方法，还有一个信号，

#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>
#include <QtQml>

class MyObject : public QObject
{
    Q_OBJECT
    Q_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;
}

然后在main.cpp中注册一下自定义的类，使用qmlRegisterType方法。

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.0

Window {
    id: window
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    MyObject{
        value: 10
        str: "zhangsan"

        onValueChanged: {

        }

        onStrChanged: {

        }

        Component.onCompleted: {
            console.log(value,str)
        }
    }
}

下面是 Qt中属性的参考文档。

Qt 元对象和属性系统_qt元对象_Mr.codeee的博客-CSDN博客1.Qt 的元对象系统Qt 的元对象系统（Meta-Object System）提供了对象之间通信的信号与槽机制、运行时类型信息和动态属性系统。元对象系统由以下三个基础组成：QObject 类是所有使用元对象系统的类的基类。在一个类的 private 部分声明 Q_OBJECT宏，使得类可以使用元对象的特性，如动态属性、信号与槽。MOC（元对象编译器）为每个 QObject 的子类提供必要的代码来实现元对象系统的特性。构建项目时，MOC 工具读取 C++ 源文件，当它发现类的定义里有 Qhttps://blog.csdn.net/wzz953200463/article/details/115497012

3.QML调用C++中的方法

使用2.QML中调用C++类型中的类，增加printMsg成员方法，在前面添加Q_INVOKABLE宏，QML中就能够访问。

public:    
    Q_INVOKABLE void printMsg();

以下是在QML中访问。

Window {
    id: window
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    MyObject{
        id: obj
        value: 10
        str: "zhangsan"
    }

    Button{
        width: 50
        height: 50
        background: Rectangle{
            color:"red"
        }
        onClicked: {
            obj.printMsg()
        }
    }
}

4.QML端发送信号，连接C++端槽函数

还是使用上面的类，首先在C++中增加一个槽函数，打印一些信息。

public slots:
    void slotMsg(int value,QString name);

//实现
void MyObject::slotMsg(int value,QString name)
{
    qDebug()<<__FUNCTION__<<" value = "<<value<<" name ="<<name;
}

在QML中增加一个信号signal sendMsg(int value,string name)，在QML中有下面两种方式连接信号槽。

Window {
    id: window
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    signal sendMsg(int value,string name)   //增加信号

    MyObject{
        id: obj
        value: 10
        str: "zhangsan"
    }

    Button{
        width: 50
        height: 50
        background: Rectangle{
            color:"red"
        }
        onClicked: {
            sendMsg(2,"zhangsan")
        }
    }

//    Connections{  //信号-槽连接方式一
//        target: window
//        function onSendMsg(i,s){
//            obj.slotMsg(i,s)
//        }
//    }

    Component.onCompleted: {    //信号-槽连接方式二
        sendMsg.connect(obj.slotMsg)
    }
}

我们也可以在C++中连接信号槽，代码如下。

首先明白一点，engine.rootObjects().first()就是QML中Window对象。

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")
}

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

打印输出：

C++中连接信号-槽。

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

5.C++端发送信号，连接QML端

还是使用上面的类，首先在C++中增加一个信号。

signals:
    void sigMsg(int value,QString name);

在QML中使用，增加槽函数slotMsg()，在QML中绑定信号-槽，在QML中触发信号。

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    function slotMsg(value,name){   //增加槽函数
        console.log(value,name)
    }

    MyObject{
        id: obj
        value: 10
        str: "zhangsan"
    }

    Button{
        width: 50
        height: 50
        background: Rectangle{
            color:"red"
        }
        onClicked: {
            obj.sigMsg(2,"zhangsan") //QML中发送信号
        }
    }

    Connections{  //信号-槽连接方式一
        target: obj
        function onSigMsg(i,s){
            window.slotMsg(i,s)
        }
    }
}

在C++中绑定信号-槽，在C++中触发信号。

    MyObject obj;
    QObject::connect(window,SIGNAL(sendMsg(int,QString)),
                     &obj,SLOT(slotMsg(int,QString)));

    obj.func(); //C++端触发信号

QML中的代码

Window {
    id: window
    objectName: "window"
    visible: true
    width: 400
    height: 500
    title: qsTr("Hello World")

    signal sendMsg(int value,string name)   //增加信号

    function showMsg(value,name){   //增加槽函数
        console.log("value ",value,name)
    }


    Button{
        width: 50
        height: 50
        background: Rectangle{
            color:"red"
        }
        onClicked: {
            //sendMsg(2,"zhangsan")
        }
    }

}

5.C++端调用QML端函数

在QML端声明一个函数

    function test(value,name){  //供C++端调用的函数
        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));