QML和C++交互

1 QML与C++交互基础
- 1.1 全局属性
- 1.2 属性私有化(提供接口访问)
2 QT与C++交互（C++创建自定义对象，qml文件直接访问）
3 QT与C++交互（qml直接访问C++中的函数）
4 QT与C++交互（qml端发送信号 C++端实现槽函数）
- 3.1 在qml端实现信号和槽的绑定(两种方式)
- 3.2 在cpp端实现信号和槽的绑定
5 QT与C++交互（cpp端发送信号 qml端实现槽函数）
- 1 qml端连接信号和槽函数
- 1 cpp端连接信号和槽函数
6 QT与C++交互（创建全局单例子对象）
7 C++端直接调用QML端函数

注意：QML使用C++创建自定义对象，均需要进行注册，QML才能进行访问
注册方式一：使用qmlRegisterType模板实现，在main.cpp中加入如下代码(见章节2例程)：

//mian.cpp
#include <QQmlEngine>
#include <QQmlContext>
#include <QQmlComponent>
//注册自定义对象
 qmlRegisterType<类名>("MyObj",1,0,"类名");  
// 
类名{
	id:
}

其次QML文件中需要导入包：

import MyObj 1.0

这种方式实现一定需要通过创建对象来自定义一个object 就是qml文件中需要下面这样创建一个对象

注册方式二：使用qmlRegisterSingletonInstance创建单例子对象，qml可以直接通过类名访问类成员和方法，注册方式首先在main.cpp中加入如下代码（见章节4例程）:

#include <QQmlEngine> 
#include <QQmlContext> 
qmlRegisterSingletonInstance("MyObj",1,0,"类名",类对象);
//其中类对象可以通过单例模式获取

1 QML与C++交互基础

1.1 全局属性

下面通过C++端设置全局属性可以被qml直接访问(相当于C++全局变量)

//main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include<QQmlContext>

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;

    //全局对象  上下文对象
    QQmlContext* context = engine.rootContext();
    //设置全局属性(qml可以直接使用)
    context->setContextProperty("SCREEN_WISTH",200);//窗口宽度


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

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: SCREEN_WISTH//全局属性
    height: 480
    visible: true
    title:qsTr("Hello World")
}

1.2 属性私有化(提供接口访问)

默认qml属性是公用化的，其他qml文件可以任意访问

//MyRectangle.qml
import QtQuick 2.15
import QtQuick.Controls 2.5
Rectangle {
    property int testValue:100
    width:200
    height:100
    color:"black"
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 480
    height: 480
    visible: true
    title:qsTr("Hello World")

    //可访问MyRectangle文件属性
    MyRectangle{
        Component.onCompleted: {
            console.log(testValue)
        }
    }
}

下面对属性进行私有化并且提供访问属性的接口，由于qml未直接提供私有化private关键字，需要依赖QtObject实现。

//MyRectangle.qml
import QtQuick 2.15
import QtQuick.Controls 2.5
Rectangle {

    width:200
    height:100
    color:"black"
    property alias attr:attributes//别名(暴露接口)
    QtObject{
        id:attributes
        property int testValue:100//私有化，外部无法直接访问
    }
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 480//全局属性
    height: 480
    visible: true
    title:qsTr("Hello World")

    //通过MyRectangle.qml暴露的接口访问属性
    MyRectangle{
        Component.onCompleted: {
            console.log(attr.testValue)//通过别名访问
        }
    }
}

2 QT与C++交互（C++创建自定义对象，qml文件直接访问）

创建一个类(注意：必须继承QObject类)
sString() setSString() iValueChanged()等函数鼠标定位到属性，按下ctrl+Enter自动生成

//myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

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

    int iValue() const;
    void setIValue(int newIValue);

    QString sString() const;
    void setSString(const QString &newSString);

signals:
    void iValueChanged();//m_iValue属性改变时触发信号

    void sStringChanged();

private:
    //下面两个属性提供给qml端访问  
    int m_iValue=20;
    QString m_sString="zhangsan";

    //此宏实现属性的读取 写入 通知改变等功能
    Q_PROPERTY(int iValue READ iValue WRITE setIValue NOTIFY iValueChanged FINAL)
    Q_PROPERTY(QString sString READ sString WRITE setSString NOTIFY sStringChanged FINAL)
};

#endif // MYOBJECT_H


//myobject.cpp
#include "myobject.h"

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

int MyObject::iValue() const
{
    return m_iValue;
}

void MyObject::setIValue(int newIValue)
{
    if (m_iValue == newIValue)
        return;
    m_iValue = newIValue;
    emit iValueChanged();
}

QString MyObject::sString() const
{
    return m_sString;
}

void MyObject::setSString(const QString &newSString)
{
    if (m_sString == newSString)
        return;
    m_sString = newSString;
    emit sStringChanged();
}

使用qmlRegisterType注册自定义对象(通常在main.cpp注册)

//main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include<QQmlContext>
#include "myobject.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;

    //注册自定义对象
    qmlRegisterType<MyObject>("MyObj",1,0,"MyObject");//MyObject是我们自定义的对象

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

使用自定义对象
iValue和sString是对象提供的接口，省略括号

main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

Window {
    width: 480//全局属性
    height: 480
    visible: true
    title:qsTr("Hello World")

    MyObject{//自定义对象MyObject
        Component.onCompleted: {
            console.log("iValue："+iValue)//访问自定义对象属性
            console.log("sString："+sString)
        }
    }
}

3 QT与C++交互（qml直接访问C++中的函数）

自定义类型中需要直接被qml端访问的函数加入Q_INVOKABLE关键字修饰即可（注意：需要注册对象注册方法见章节 2）

//myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
public:
    explicit MyObject(QObject *parent = nullptr);
    //声明函数 加入Q_INVOKABLE关键字，支持被qml直接访问
    Q_INVOKABLE void fun();
};

#endif // MYOBJECT_H

//myobject.cpp
#include "myobject.h"
#include <QDebug>
MyObject::MyObject(QObject *parent)
    : QObject{parent}
{}
//定义函数
void MyObject::fun()
{
    qDebug()<<__FUNCTION__;
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

Window {
    width: 480//全局属性
    height: 480
    visible: true
    title:qsTr("Hello World")

    //创建对象myobj
    MyObject{
        id:myobj
    }

    //调用myobj对象的函数
    Button{
        onClicked:{
            myobj.fun();
        }
    }
}

4 QT与C++交互（qml端发送信号 C++端实现槽函数）

3.1 在qml端实现信号和槽的绑定(两种方式)

//myobject.h   写槽函数
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

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

public slots://声明槽函数
    void cppSlot(QString name,int age);
};

#endif // MYOBJECT_H


//mybject.cpp
#include "myobject.h"
#include <QDebug>
MyObject::MyObject(QObject *parent)
    : QObject{parent}
{}

//定义槽函数
void MyObject::cppSlot(QString name, int age)
{
    qDebug()<<__FUNCTION__<<name<<":"<<age;
}

//main.qml  发送信号
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

Window {
    id:window
    width: 480//全局属性
    height: 480
    visible: true
    title:qsTr("Hello World")

    //定义信号
    signal qmlSig(string name,int age)

    //创建对象myobj
    MyObject{
        id:myobj
    }

    //点击按钮发送信号
    Button{
        onClicked:{
            qmlSig("zhangsan",13)
        }
    }
	
	//下面两种方式任意选择一种绑定信号的槽函数
		
    //连接信号和槽函数方式1
    // Connections{
    //     target:window
    //     function onQmlSig(name,age){
    //         myobj.cppSlot(name,age)//C++端槽函数
    //     }
    // }

    //连接信号的槽函数方式2
    // Component.onCompleted:{
    //     qmlSig.connect(myobj.cppSlot)
    // }

3.2 在cpp端实现信号和槽的绑定

//myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

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

    //单例模式
    static MyObject* getInstance(){
        static MyObject obj;
        return &obj;
    }

public slots://声明槽函数
    void cppSlot(QString name,int age);
};

#endif // MYOBJECT_H

//myobject.cpp
#include "myobject.h"
#include <QDebug>
MyObject::MyObject(QObject *parent)
    : QObject{parent}
{}

//定义槽函数
void MyObject::cppSlot(QString name, int age)
{
    qDebug()<<__FUNCTION__<<name<<":"<<age;
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

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

    //定义信号
    signal qmlSig(string name,int age)

    //创建对象myobj
    MyObject{
        id:myobj
    }

    //点击按钮发送信号
    Button{
        objectName:"mybutton"
        onClicked:{
            qmlSig("zhangsan",13)
        }
    }
}

需要在main.cpp文件中绑定信号和槽函数（注意必须在load完成之后）

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include<QQmlContext>
#include<QObject>
#include "myobject.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;

    //注册自定义对象
    qmlRegisterType<MyObject>("MyObj",1,0,"MyObject");

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

    /**************************************************/
    //必须在load以后进行绑定槽函数
    auto list = engine.rootObjects();//获取main.qml的所有组件
    auto window = list.first();//拿到第一个组件（也就是window）
    //连接信号和槽函数
    QObject::connect(window,SIGNAL(qmlSig(QString,int)),MyObject::getInstance(),SLOT(cppSlot(QString,int)));
    /**************************************************/

    return app.exec();
}

5 QT与C++交互（cpp端发送信号 qml端实现槽函数）

1 qml端连接信号和槽函数

//myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>

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

    Q_INVOKABLE void func();
signals:
    //信号
    void cppSig(QString name,int age);
};

#endif // MYOBJECT_H


//myobject.cpp
#include "myobject.h"
#include <QDebug>
MyObject::MyObject(QObject *parent)
    : QObject{parent}
{}

//触发信号
void MyObject::func()
{
    emit cppSig("zhangsan",20);
    qDebug()<<__FUNCTION__<<"函数发送cppSig信号";
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

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

    //定义槽函数
    function qmlSlot(name,age){
        console.log("qml",name,age)
    }

    //创建对象myobj
    MyObject{
        id:myobj
    }

    //点击按钮调用cpp端函数发送信号
    Button{
        objectName:"mybutton"
        onClicked:{
            myobj.func()//cpp端函数 会发送信号
        }
    }

    //绑定信号和槽函数
    Connections{
        target: myobj
        function onCppSig(name,age){//cpp端的信号
           qmlSlot(name,age)//qml端的槽函数
        }
    }
}

1 cpp端连接信号和槽函数

注意：qml函数参数类型统一为都是QVariant

//myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>
#include <QVariant>
class MyObject : public QObject
{
    Q_OBJECT
public:
    explicit MyObject(QObject *parent = nullptr);
    //单例模式
    static MyObject* getInstance(){
        static MyObject instance;
        return &instance;
    }

    Q_INVOKABLE void func();
signals:
    //信号
    void cppSig(QVariant name,QVariant age);
};

#endif // MYOBJECT_H


//myobject.h
#include "myobject.h"
#include <QDebug>
MyObject::MyObject(QObject *parent)
    : QObject{parent}
{}

//触发信号
void MyObject::func()
{
    emit cppSig("zhangsan",20);//发送信号
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

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

    //创建对象myobj
    MyObject{
        id:myobj
    }

    //定义槽函数
    function qmlSlot(name,age){//参数类型 对应CPP端 都是QVariant
        console.log("qml",name,age)
    }

    //点击按钮调用cpp端函数发送信号
    Button{
        objectName:"mybutton"
        onClicked:{
            myobj.func()//cpp端函数 会发送信号
        }
    }
}

6 QT与C++交互（创建全局单例子对象）

自定义对象使用qmlRegisterType模板方式注册，每次需要在qml创建对象太繁琐，QT提供了qmlRegisterSingletonInstance方式创建全局单例子对象，可以在qml文件中直接使用类名而不需要创建对象

//myobject.h
#ifndef MYOBJECT_H
#define MYOBJECT_H

#include <QObject>
#include<QVariant>
class MyObject : public QObject
{
    Q_OBJECT
public:
    explicit MyObject(QObject *parent = nullptr);
    //单例模式
    static MyObject* getInstance(){
        static MyObject instance;
        return &instance;
    }

    //函数
    Q_INVOKABLE void func();
};

#endif // MYOBJECT_H

//myobject.cpp
#include "myobject.h"
#include <QDebug>
MyObject::MyObject(QObject *parent)
    : QObject{parent}
{}

//触发信号
void MyObject::func()
{
    qDebug()<<__FUNCTION__;
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import MyObj 1.0

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

    //点击按钮调用cpp端函数发送信号
    Button{
        objectName:"mybutton"
        onClicked:{
            MyObject.func()//直接通过类名调用函数，无需创建对象
        }
    }
}

//main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include<QQmlContext>
#include<QObject>
#include "myobject.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;

    /***********************创建全局单例子对象********************************/
    qmlRegisterSingletonInstance("MyObj",1,0,"MyObject",MyObject::getInstance());
    /******************************************************************/

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

7 C++端直接调用QML端函数

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

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

    //待cpp端调用函数
    function qmlFunc(i,v){
        return "success"
    }
}

//main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include<QQmlContext>
#include<QObject>
#include<QDebug>
#include "myobject.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;

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

    /*******************C++端直接调用QML端函数************/
    //拿到qml的window对象
    auto list = engine.rootObjects();//获取main.qml的所有组件
    auto window = list.first();//拿到第一个组件（也就是window）
    //调用函数
    QVariant res;//用来保存函数的返回值
    QVariant arg_1=123;//入参1
    QVariant arg_2="zhangsan";//入参2
    QMetaObject::invokeMethod(window,
                              "qmlFunc",//qml函数名
                              Q_RETURN_ARG(QVariant,res),//返回值保存
                              Q_ARG(QVariant,arg_1),//函数参数1
                              Q_ARG(QVariant,arg_2));//函数参数2
    qDebug()<<"res="<<res;//打印返回值
    /*********************************************/
    return app.exec();
}