QML和C++交互

注意：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);
#endifQGuiApplication 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.15Window {width: SCREEN_WISTH//全局属性height: 480visible: truetitle:qsTr("Hello World")
}

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

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

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

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 480height: 480visible: truetitle: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:200height:100color:"black"property alias attr:attributes//别名(暴露接口)QtObject{id:attributesproperty int testValue:100//私有化，外部无法直接访问}
}

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 480//全局属性height: 480visible: truetitle: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);
#endifQGuiApplication 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.0Window {width: 480//全局属性height: 480visible: truetitle:qsTr("Hello World")MyObject{//自定义对象MyObjectComponent.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.0Window {width: 480//全局属性height: 480visible: truetitle:qsTr("Hello World")//创建对象myobjMyObject{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.0Window {id:windowwidth: 480//全局属性height: 480visible: truetitle:qsTr("Hello World")//定义信号signal qmlSig(string name,int age)//创建对象myobjMyObject{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.0Window {id:windowwidth: 480height: 480visible: trueobjectName:"window"title:qsTr("Hello World")//定义信号signal qmlSig(string name,int age)//创建对象myobjMyObject{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);
#endifQGuiApplication 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.0Window {id:windowwidth: 480height: 480visible: trueobjectName:"window"title:qsTr("Hello World")//定义槽函数function qmlSlot(name,age){console.log("qml",name,age)}//创建对象myobjMyObject{id:myobj}//点击按钮调用cpp端函数发送信号Button{objectName:"mybutton"onClicked:{myobj.func()//cpp端函数 会发送信号}}//绑定信号和槽函数Connections{target: myobjfunction 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.0Window {id:windowwidth: 480height: 480visible: trueobjectName:"window"title:qsTr("Hello World")//创建对象myobjMyObject{id:myobj}//定义槽函数function qmlSlot(name,age){//参数类型 对应CPP端 都是QVariantconsole.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.0Window {id:windowwidth: 480height: 480visible: trueobjectName:"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);
#endifQGuiApplication 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.5Window {id:windowwidth: 480height: 480visible: trueobjectName:"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);
#endifQGuiApplication 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;//入参1QVariant arg_2="zhangsan";//入参2QMetaObject::invokeMethod(window,"qmlFunc",//qml函数名Q_RETURN_ARG(QVariant,res),//返回值保存Q_ARG(QVariant,arg_1),//函数参数1Q_ARG(QVariant,arg_2));//函数参数2qDebug()<<"res="<<res;//打印返回值/*********************************************/return app.exec();
}