QML与C++交互的实现步骤

#ifndef CPPOBJECT_H
#define CPPOBJECT_H
 
#include <QObject>
 
//派生自QObject
//使用qmlReGISterType注册到QML中
class CppObject : public QObject
{
    Q_OBJECT
    //注册属性，使之可以在QML中访问--具体语法百度Q_PROPERTY
    Q_PROPERTY(QString name READ getName WRITE setName NOTIFY nameChanged)
    Q_PROPERTY(int year READ getYear WRITE setYear NOTIFY yearChanged)
 
public:
    explicit CppObject(QObject *parent = nullptr);
    //通过Q_INVOKABLE宏标记的public函数可以在QML中访问
    Q_INVOKABLE void sendSignal();//功能为发送信号
 
    //给类属性添加访问方法--myName
    void setName(const QString &name);
    QString getName() const;
    //给类属性添加访问方法--myYear
    void setYear(int year);
    int getYear() const;
 
signals:
    //信号可以在QML中访问
    void cppSignalA();//一个无参信号
    void cppSignalB(const QString &str,int value);//一个带参数信号
    void nameChanged(const QString name);
    void yearChanged(int year);
 
public slots:
    //public槽函数可以在QML中访问
    void cppSlotA();//一个无参槽函数
    void cppSlotB(const QString &str,int value);//一个带参数槽函数
 
private:
    //类的属性
    QString myName;
    int myYear;
};
 
#endif // CPPOBJECT_H

#include "CppObject.h"
 
#include <QDebug>
 
CppObject::CppObject(QObject *parent)
    : QObject(parent),
      myName("none"),
      myYear(0)
{
 
}
 
void CppObject::sendSignal()
{
    //测试用，调用该函数后发送信号
    qDebug()<<"CppObject::sendSignal";
    emit cppSignalA();
    emit cppSignalB(myName,myYear);
}
 
void CppObject::setName(const QString &name)
{
    qDebug()<<"CppObject::setName"<<name;
    if(myName!=name){
        qDebug()<<"emit nameChanged";
        myName=name;
        emit nameChanged(name);
    }
}
 
QString CppObject::getName() const
{
    qDebug()<<"CppObject::getName";
    return myName;
}
 
void CppObject::setYear(int year)
{
    qDebug()<<"CppObject::setYear"<<year;
    if(year!=myYear){
        qDebug()<<"emit yearChanged";
        myYear=year;
        emit yearChanged(myYear);
    }
}
 
int CppObject::getYear() const
{
    qDebug()<<"CppObject::getYear";
    return myYear;
}
 
void CppObject::cppSlotA()
{
    qDebug()<<"CppObject::cppSlotA";
}
 
void CppObject::cppSlotB(const QString &str, int value)
{
    qDebug()<<"CppObject::cppSlotB"<<str<<value;
}

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "CppObject.h"
 
int main(int arGC, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 
    QGuiApplication app(argc, argv);
 
    //qmlRegisterType注册C++类型至QML
    //arg1:import时模块名
    //arg2:主版本号
    //arg3:次版本号
    //arg4:QML类型名
    qmlRegisterType<CppObject>("MyCppObject",1,0,"CppObject");
 
    QQmlApplicationEngine engine;
 
    //也可以注册为qml全局对象
    //engine.rootContext()->setContextProperty("cppObj",new CppObject(qApp));
 
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;
 
    return app.exec();
}

import QtQuick 2.9
import QtQuick.Window 2.9
//引入我们注册的模块
import MyCppObject 1.0
 
Window {
    id: root
    visible: true
    width: 500
    height: 300
    title: qsTr("QML调用Cpp对象：by 龚建波1992")
    color:"green"
 
    signal qmlSignalA
    signal qmlSignalB(string str,int value)
 
    //鼠标点击区域
    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        //测试时点击左键或右键
        onClicked: {
            if(mouse.button===Qt.LeftButton){
                console.log('----qml 点击左键：Cpp发射信号')
                cpp_obj.name="Gongjianbo"  //修改属性会触发set函数，获取值会触发get函数
                cpp_obj.year=1992
                cpp_obj.sendSignal() //调用Q_INVOKABLE宏标记的函数
            }else{
                console.log('----qml 点击右键：QML发射信号')
                root.qmlSignalA()
                root.qmlSignalB('gongjianbo',1992)
            }
        }
    }
 
    //作为一个QML对象
    CppObject{
        id:cpp_obj
        //也可以像原生QML对象一样操作，增加属性之类的
        property int counts: 0
 
        onYearChanged: {
            counts++
            console.log('qml onYearChanged',counts)
        }
        onCountsChanged: {
            console.log('qml onCountsChanged',counts)
        }
    }
 
    //组件加载完成执行
    Component.onCompleted: {
        //关联信号与信号处理函数的方式同QML中的类型
        //Cpp对象的信号关联到Qml
        //cpp_obj.onCppSignalA.connect(function(){console.log('qml signalA process')})
        cpp_obj.onCppSignalA.connect(()=>console.log('qml signalA process')) //js的lambda
        cpp_obj.onCppSignalB.connect(processB)
        //Qml对象的信号关联到Cpp
        root.onQmlSignalA.connect(cpp_obj.cppSlotA)
        root.onQmlSignalB.connect(cpp_obj.cppSlotB)
    }
 
    //定义的函数可以作为槽函数
    function processB(str,value){
        console.log('qml function processB',str,value)
    }
}

import QtQuick 2.9
 
Item{
    id: root
    width: 250
    height: 250
    //自定义属性  --cpp可以访问
    property string msg: "GongJianBo1992"
    //自定义信号  --可以触发cpp槽函数
    signal qmlSendMsg(string arg1,string arg2)
 
    Rectangle {
        anchors.fill: parent
        color: "green"
        objectName: "rect" //用于cpp查找对象
    }
 
    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 qml_method(val_arg){
        console.log("qml method runing",val_arg,"return ok")
        return "ok"
    }
    //注意槽函数参数为var类型
    function qmlRecvMsg(arg1,arg2){
        console.log("qml slot runing",arg1,arg2)
    }
}

#ifndef CPPOBJECT_H
#define CPPOBJECT_H
 
#include <QObject>
#include <QDebug>
 
class CppObject : public QObject
{
    Q_OBJECT
public:
    explicit CppObject(QObject *parent = Q_NULLPTR)
        :QObject(parent){}
 
signals:
    //信号 --用来触发qml的函数
    //注意参数为var类型，对应qml中js函数的参数类型
    void cppSendMsg(const QVariant &arg1,const QVariant &arg2);
 
public slots:
    //槽函数 --用来接收qml的信号
    void cppRecvMsg(const QString &arg1,const QString &arg2){
        qDebug()<<"CppObject::cppRecvMsg"<<arg1<<arg2;
        qDebug()<<"emit cppSendMsg";
        emit cppSendMsg(arg1,arg2);
    }
};
 
#endif // CPPOBJECT_H

#include <QGuiApplication>
#include <QQmlProperty>
#include <QQuickView>
#include <QQuickItem>
#include <QMetaObject>
#include <QDebug>
 
#include "CppObject.h"
 
int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 
    QGuiApplication app(argc, argv);
 
    //可以用QQmlComponent\QQuickView\QQuickWidget的C++代码加载QML文档
    //QQuickView不能用Window做根元素
    QQuickView view(QUrl("qrc:/main.qml"));
    view.show();
 
    //获取到qml根对象的指针
    QObject *qmlObj=view.rootObject();
 
    
 
    //【1】
    //通过QObject设置属性值
    qDebug()<<"Cpp set qml property height";
    //qmlObj->setProperty("height",300);
    QQmlProperty(qmlObj,"height").write(300);
    //通过QObject获取属性值
    qDebug()<<"Cpp get qml property height"<<qmlObj->property("height");
    //任何属性都可以通过C++访问
    qDebug()<<"Cpp get qml property msg"<<qmlObj->property("msg");
 
    //【2】
    QQuickItem *item=qobject_cast<QQuickItem*>(qmlObj);
    //通过QQuickItem设置属性值
    qDebug()<<"Cpp set qml property width";
    item->setWidth(300);
    //通过QQuickItem获取属性值
    qDebug()<<"Cpp get qml property width"<<item->width();
 
    //【3】
    //通过objectName访问加载的QML对象
    //QObject::findChildren()可用于查找具有匹配objectName属性的子项
    QObject *qmlRect=qmlObj->findChild<QObject*>("rect");
    if(qmlRect){
        qDebug()<<"Cpp get rect color"<<qmlRect->property("color");
    }
 
    //【4】
    //调用QML方法
    QVariant val_return;  //返回值
    QVariant val_arg="GongJianBo";  //参数值
    //Q_RETURN_ARG()和Q_Arg()参数必须制定为QVariant类型
    QMetaObject::invokeMethod(qmlObj,
                              "qml_method",
                              Q_RETURN_ARG(QVariant,val_return),
                              Q_ARG(QVariant,val_arg));
    qDebug()<<"QMetaObject::invokeMethod result"<<val_return; //qml函数中返回“ok”
 
    //【5】
    //关联信号槽
    CppObject cppObj;
    //关联qml信号与cpp槽
    //如果信号参数为QML对象类型，信号用var参数类型，槽用QVariant类型接收
    QObject::connect(qmlObj,SIGNAL(qmlSendMsg(QString,QString)),
                     &cppObj,SLOT(cppRecvMsg(QString,QString)));
    //关联cpp信号与qml槽
    //qml中js函数参数为var类型，信号也用QVariant类型
    QObject::connect(&cppObj,SIGNAL(cppSendMsg(QVariant,QVariant)),
                     qmlObj,SLOT(qmlRecvMsg(QVariant,QVariant)));
    //此外，cpp信号也可以关联qml信号
 
    return app.exec();
}