Qml与C++交互

Qml与C++交互

文档如是说，使用C ++代码中定义的功能可以轻松扩展QML。
由于QML引擎与Qt元对象系统的紧密集成，可以从QML代码访问由QObject派生的类适当公开的任何功能。
这使得C ++类的属性和方法可以直接从QML访问，通常很少或无需修改。

QML引擎能够通过元对象系统内省QObject实例。
这意味着，

• 任何QML代码都可以访问QObject派生类实例的以下成员：
  • 属性（使用Q_PROPERTY注册的属性）
  • 方法（需注册为public slots或是标记为Q_INVOKABLE）
  • 信号
    （此外，如果已使用Q_ENUMS声明枚举，则可以使用枚举。）

通常，无论是否已向QML类型系统注册了QObject派生类，都可以从QML访问它们。
但是，如果QML引擎要访问其他类型信息（例如，如果要将类本身用作方法参数或属性，或者要将其中一个枚举类型用于以这种方式使用），那么该类可能需要注册。

QML中调用C++类型

例子

颜色改变例子
新建一个ColorMaker类
colormaker.h文件如下：

#ifndef COLORMAKER_H
#define COLORMAKER_H

#include <QObject>
#include <QColor>
#include <QTimerEvent>

class ColorMaker : public QObject
{
    Q_OBJECT

    Q_ENUMS(GenerateAlgorithm)
    Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChanged)
    Q_PROPERTY(QColor timeColor READ timeColor)

public:
    explicit ColorMaker(QObject *parent = 0);

    enum GenerateAlgorithm
    {
        RandomRGB,
        RandomRed,
        RandomBlue,
        RandomGreen,
        LinearIncrease
    };

    QColor getColor() const;
    void setColor(const QColor &color);
    QColor timeColor() const;

    Q_INVOKABLE GenerateAlgorithm algorithm() const;
    Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);

signals:
    void colorChanged(const QColor &color);
    void currentTime(const QString &timeStr);

public slots:
    void start();
    void stop();

protected:
    void timerEvent(QTimerEvent *e);

private:
    GenerateAlgorithm m_algorithm;
    QColor m_currentColor;
    int m_nColorTimer;
};

#endif // COLORMAKER_H

colormaker.cpp文件

#include "colormaker.h"
#include <QDateTime>

ColorMaker::ColorMaker(QObject *parent) : QObject(parent),
    m_algorithm(RandomRGB),
    m_currentColor(Qt::black),
    m_nColorTimer(0)
{
    qsrand(QDateTime::currentDateTime().toTime_t());
}

QColor ColorMaker::getColor() const
{
    return m_currentColor;
}

void ColorMaker::setColor(const QColor &color)
{
    m_currentColor = color;
}

QColor ColorMaker::timeColor() const
{
    QTime time = QTime::currentTime();
    int r = time.hour();
    int g = time.minute();
    int b = time.second();
    return QColor::fromRgb(r, g, b);
}

ColorMaker::GenerateAlgorithm ColorMaker::algorithm() const
{
    return m_algorithm;
}

void ColorMaker::setAlgorithm(GenerateAlgorithm algorithm)
{
    m_algorithm = algorithm;
}

void ColorMaker::start()
{
    if(m_nColorTimer == 0)
    {
        m_nColorTimer = startTimer(1000);
    }
}

void ColorMaker::stop()
{
    if(m_nColorTimer > 0) {
        killTimer(m_nColorTimer);
        m_nColorTimer = 0;
    }
}

void ColorMaker::timerEvent(QTimerEvent *e)
{
    if(e->timerId() == m_nColorTimer) {
        switch (m_algorithm) {
        case RandomRGB:
            m_currentColor.setRgb(qrand() % 255,
                                  qrand() % 255,
                                  qrand() % 255
                                  );
            break;
        case RandomRed:
            m_currentColor.setRed(qrand() % 255
                                  );
            break;
        case RandomGreen:
            m_currentColor.setGreen(qrand() % 255
                                  );
            break;
        case RandomBlue:
            m_currentColor.setBlue(qrand() % 255
                                  );
            break;
        case LinearIncrease:
            int r = m_currentColor.red() + 10;
            int g = m_currentColor.green() + 10;
            int b = m_currentColor.blue() + 10;
            m_currentColor.setRgb(r % 255, g % 255, b % 255);
            break;
        }
        emit colorChanged(m_currentColor);
        emit currentTime(QDateTime::currentDateTime().toString("yyyy-MM-dd HH:mm:ss"));
    }
    else {
        QObject::timerEvent(e);
    }
}

在main.cpp文件中使用qmlRegisterType函数注册C++类型
int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName)
This template function registers the C++ type in the QML system with the name qmlName, in the library imported from uri having the version number composed from versionMajor and versionMinor.
这个模板函数注册C++类型，在QML系统中命名为qmlname，
在从uri导入的库，该库的版本数字由versionMajor和versionMinor组成(大版本及小版本，如：1.0, 1.1, …)

main.qml文件

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import com.superyu.ColorMaker 1.0

Rectangle {
    width: 400
    height: 400
    Text {
        id: timeLabel
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.top: parent.top
        anchors.topMargin: 5
        font.pointSize: 26
    }
    ColorMaker {
        id: colorMaker
        color: "red"
    }
    Rectangle {
        id: colorRect
        anchors.centerIn: parent
        width: 200
        height: 200
        color: "blue"
    }
    Button {
        id: start
        text: "Start"
        anchors.left: parent.left
        anchors.leftMargin: 5
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        onClicked: {
            colorMaker.start();
        }
    }
    Button {
        id: stop
        text: "Stop"
        anchors.left: start.right
        anchors.leftMargin: 5
        anchors.bottom: start.bottom
        onClicked: {
            colorMaker.stop();
        }
    }

    function changeAlgorithm(button, algorithm) {
        switch(algorithm)
        {
        case 0:
            button.text = "RandomRGB";
            break;
        case 1:
            button.text = "RandomRed";
            break;
        case 2:
            button.text = "RandomGreen";
            break;
        case 3:
            button.text = "RandomBlue";
            break;
        case 4:
            button.text = "LinearIncrease";
            break;
        }
    }
    Button {
        id: colorAlgorithm
        text: "RandomRGB"
        anchors.left: stop.right
        anchors.leftMargin: 5
        anchors.bottom: start.bottom
        onClicked: {
            var algorithm = (colorMaker.algorithm() + 1) % 5;
            changeAlgorithm(colorAlgorithm, algorithm);
            colorMaker.setAlgorithm(algorithm)
        }
    }
    Button {
        id: quit
        text: "Quit"
        anchors.left: colorAlgorithm.right
        anchors.leftMargin: 5
        anchors.bottom: start.bottom
        onClicked: {
            Qt.quit();
        }
    }
    Component.onCompleted: {
        colorMaker.color = Qt.rgba(0, 180, 120, 255);
        colorMaker.setAlgorithm(colorMaker.LinearIncrease);
        changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
    }

    Connections {
        target: colorMaker
        onCurrentTime: {
            timeLabel.text = timeStr;
            timeLabel.color = colorMaker.timeColor;
        }
    }
    Connections {
        target: colorMaker
        onColorChanged: {
            colorRect.color = color;
        }
    }
}

import com.superyu.ColorMaker 1.0
这个导入库在main.cpp文件的qmlRegisterType(“com.superyu.ColorMaker”, 1, 0, “ColorMaker”);定义了

使用ColorMaker对象

ColorMaker {
    id: colorMaker
    color: "red"
}

点击colorAlgorithm按钮改变颜色显示算法

Button {
    id: colorAlgorithm
    text: "RandomRGB"
    anchors.left: stop.right
    anchors.leftMargin: 5
    anchors.bottom: start.bottom
    onClicked: {
        var algorithm = (colorMaker.algorithm() + 1) % 5;
        changeAlgorithm(colorAlgorithm, algorithm);
        colorMaker.setAlgorithm(algorithm)
    }
}

在组件加载完后，再改变颜色算法

Component.onCompleted: {
    colorMaker.color = Qt.rgba(0, 180, 120, 255);
    colorMaker.setAlgorithm(colorMaker.LinearIncrease);
    changeAlgorithm(colorAlgorithm, colorMaker.algorithm());
}

连接信号到Qml

Connections {
    target: colorMaker
    onCurrentTime: {
        timeLabel.text = timeStr;
        timeLabel.color = colorMaker.timeColor;
    }
}
Connections {
    target: colorMaker
    onColorChanged: {
        colorRect.color = color;
    }
}
//colorMaker.h
signals:
    void colorChanged(const QColor &color);
    void currentTime(const QString &timeStr);

更新事件及改变colorRect的颜色

QML调用C++对象总结

1.创建一个父类为QObject的类；
2.将要曝光给QML的属性用Q_Property声明，如：Q_PROPERTY(QColor color READ getColor WRITE setColor NOTIFY colorChanged)，函数用Q_INVOKABLE声明；
3.注册类型qmlRegisterType(“com.superyu.ColorMaker”, 1, 0, “ColorMaker”)
4.在qml文件中导入C++类，import com.superyu.ColorMaker 1.0
5.在qml文件中使用Connections，与C++类发送的信号相连

Connections {
    target: colorMaker  //连接对象
    onColorChanged: {   //信号槽函数
        colorRect.color = color;
    }
}

C++调用QML

例子

cppInvokeQml.qml

import QtQuick 2.0

Item {
    id: root
    width: 200
    height: 200

    //自定义属性，cpp可以访问
    property string msg: "superyu"

    //自定义信号，可以触发cpp槽函数
    signal qmlSendMsg(string arg1, string arg2)

    Rectangle {
        anchors.fill: parent
        color: "red"
        objectName: "rect"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("qml点击鼠标， 发送信号qmlSendMsg");
            root.qmlSendMsg(root.msg, "myarg2");
        }
    }

    onHeightChanged: console.log("qml height changed...");
    onWidthChanged: console.log("qml width changed...");

    //QML中的方法可以被cpp调用，也可以作为槽函数
    function qmlMethod(var_arg)
    {
        console.log("qml method running", var_arg, "return ok");
        return "ok";
    }

    function qmlRecvMsg(arg1, arg2)
    {
        console.log("qml slot running...", arg1, arg2);
    }
}

自定义信号和属性，以便于cpp文件中使用
cppCallQml.h文件

#ifndef CPPCALLQML_H
#define CPPCALLQML_H

#include <QObject>
#include <QDebug>

class CppCallQml : public QObject
{
    Q_OBJECT
public:
    explicit CppCallQml(QObject *parent = Q_NULLPTR);

signals:
    //信号 --用来触发qml的函数
    //注意参数为var类型，对应qml中js函数的参数类型
    void cppSendMsg(const QVariant &arg1, const QVariant &arg2);

public slots:
    void cppRecvMsg(const QString &arg1, const QString &arg2);
};

#endif // CPPCALLQML_H

cppCallQml.cpp文件

#include "cppcallqml.h"

CppCallQml::CppCallQml(QObject *parent) : QObject(parent)
{

}

void CppCallQml::cppRecvMsg(const QString &arg1, const QString &arg2)
{
    qDebug()<< "CppObject::cppRecvMsg" << arg1 << arg2;
    qDebug()<< "emit cppSendMsg";
    emit cppSendMsg(arg1, arg2);
}

main.cpp文件

//c++调用qml
QQuickView view(QUrl("qrc:/cppInvokeQmlMain.qml"));
view.show();

//获取到qml跟对象的指针
QObject *qmlObj = view.rootObject();
QQmlProperty(qmlObj, "height").write(300);
qDebug()<< "cpp get qml property height: "
        << qmlObj->property("height");
qDebug()<< "cpp get qml property msg: "
        << qmlObj->property("msg");

//通过QQuickItem设置属性
QQuickItem *item = qobject_cast<QQuickItem*>(qmlObj);
item->setWidth(300);

//查找子项
QObject *qmlRect = qmlObj->findChild<QObject*>("rect");
if(qmlRect) {
    qDebug() << "cpp get rect color: " << qmlRect->property("color");
}

//调用qml方法
QVariant val_return;
QVariant val_arg = "superyu";
//Q_RETURN_ARG(),Q_ARG()参数必须为QVariant类型
QMetaObject::invokeMethod(qmlObj,
                            "qmlMethod",
                            Q_RETURN_ARG(QVariant, val_return),
                            Q_ARG(QVariant, val_arg));
qDebug() << "QMetaObject::invokeMethod result: " << val_return;

//关联信号槽
CppCallQml cppObj;
QObject::connect(
                    qmlObj,
                    SIGNAL(qmlSendMsg(QString, QString)),
                    &cppObj,
                    SLOT(cppRecvMsg(QString, QString))
                    );
QObject::connect(
                    &cppObj,
                    SIGNAL(cppSendMsg(QVariant, QVariant)),
                    qmlObj,
                    SLOT(qmlRecvMsg(QVariant, QVariant))
                    );

return app.exec();

QML__Nokia内部培训资料(1).pdf
https://blog.csdn.net/gongjianbo1992/article/details/87965925
https://github.com/gongjianbo/MyTestCode/tree/master/Qml/CppCallQml2020