QML与C++的交互操作

news2025/1/30 16:30:04

  QML旨在通过C ++代码轻松扩展。Qt QML模块中的类使QML对象能够从C ++加载和操作，QML引擎与Qt元对象系统集成的本质使得C ++功能可以直接从QML调用。这允许开发混合应用程序，这些应用程序是通过混合使用QML，JavaScript和C ++代码实现的。除了从QML访问C ++功能的能力之外，Qt QML模块还提供了从C ++代码执行反向和操作QML对象的方法。下面会通过示例来讲解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引擎要访问其他类型信息（例如，如果要将类本身用作方法参数或属性，或者要将其中一个枚举类型用于以这种方式使用），那么该类可能需要注册。代码示例有四个文件，QtQuick Empty工程的两个加自定义的Cpp类h和cpp文件。

#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

在头文件中，我定义了信号和public槽函数，以及Q_INVOKABLE宏标记的public函数，还通过Q_PROPERTY注册了两个属性，这些方法和属性之后都可以在QML中进行访问。

#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;
}

为了测试方便，给每个函数都加了一个打印语句，当调用sendSignal函数时将会emit两个信号，稍后会在QML中调用该函数。

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

通过使用qmlRegisterType，将刚才定义的QObject派生类注册到QML中。

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

注册之后就能直接在QML中使用刚才定义的C++类型了，并且可以像QML定义的类型一样进行操作，如信号槽关联、属性绑定等。

这个示例很简单，点击鼠标左键调用CppObj的sendSignal函数来发送信号，QML处理；点击鼠标右键QML发送信号，CppObj处理，下面是操作结果：

 可以看到QML成功的访问了CppObj的属性和方法，并能进行信号槽的关联。

第二个例子：C++中加载QML对象

所有QML对象类型都是源自QObject类型，无论它们是由引擎内部实现还是第三方定义。这意味着QML引擎可以使用Qt元对象系统动态实例化任何QML对象类型并检查创建的对象。

这对于从C ++代码创建QML对象非常有用，无论是显示可以直观呈现的QML对象，还是将非可视QML对象数据集成到C ++应用程序中。一旦创建了QML对象，就可以从C ++中检查它，以便读取和写入属性，调用方法和接收信号通知。

可以使用QQmlComponent或QQuickView来加载QML文档。QQmlComponent将QML文档作为为一个C++对象加载，然后可以从C++ 代码进行修改。QQuickView也可以这样做，但由于QQuickView是一个基于QWindow的派生类，加载的对象也将可视化显示，QQuickView通常用于将一个可视化的QML对象集成到应用程序的用户界面中。

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

在QML中定义了一些属性和方法等，用于测试。

 

#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

Cpp中定义了一个槽函数，用来接收QML对象的信号

#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();
 
    /*文档如是说：
    应该始终使用QObject::setProperty()、QQmlProperty
    或QMetaProperty::write()来改变QML的属性值，以确保QML引擎感知属性的变化。*/
 
    //【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();
}

然后就把文档中的东西测试了下，操作起来很简单。不过相对于QML中使用C++对象来说，感觉作用没那么大，因为一般把QML嵌入到Widgets中才会做这些操作，但是混合两个框架很多坑。下面是测试输出结果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/965144.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

15年检测生涯转瞬即逝，复旦MBA助力邢国芒实现质量强国梦

15年检测生涯转瞬即逝，复旦MBA助力邢国芒实现质量强国梦

日月光华&#xff0c;旦复旦兮&#xff01;复旦MBA如同一个巨大的磁场&#xff0c;吸引了诸多来自五湖四海、各行各业的职场精英。从初入职场的青涩懵懂到如今的独当一面专业干练&#xff0c;他们逐渐成长为职场的中坚力量&#xff0c;在各自领域内发光发热。作为新时代的青年&…
阅读更多...
多线程应用——阻塞队列

多线程应用——阻塞队列

阻塞队列 文章目录 阻塞队列1.队列的概念2.阻塞队列3.现实中的例子4.消息队列5.使用队列的优势1.解耦2.削峰填谷3.异步操作 6.实现 1.队列的概念 一种先进先出的数据结构 2.阻塞队列 队列写元素是从队尾插入&#xff0c;从对头取出 当插入元素时&#xff0c;先判断一下队列…
阅读更多...
数据治理-数据管理框架

数据治理-数据管理框架

DMBOK2提出的想法和概念在不同的组织中都可以应用&#xff0c;组织所采用的数据管理方法取决于某些关键要素&#xff0c;如其所处行业、所应用的数据范围、企业文化、成熟度、战略、愿景以及待解决的问题和挑战。 战略一致性模型和阿姆斯特丹模型&#xff0c;展示了组织管理数…
阅读更多...
算法通关村第十二关——字符串反转问题解析

算法通关村第十二关——字符串反转问题解析

前言 字符串反转是关于字符串算法里的重要问题&#xff0c;虽然不是太难&#xff0c;但需要考虑到一些边界问题。本篇文章就对几道字符串反转题目进行分析。 1.反转字符串 力扣344题&#xff0c;编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数…
阅读更多...
opencv 提取选中区域内指定hsv颜色的水印

opencv 提取选中区域内指定hsv颜色的水印

基于《QT 插件化图像算法研究平台》做的功能插件。提取选中区域内指定hsv颜色的水印。 《QT 插件化图像算法研究平台》有个HSV COLOR PICK功能&#xff0c;可以很直观、方便地分析出水印 的hsv颜色&#xff0c;比如, 蓝色&#xff1a;100,180,0,255,100,255。 然后利用 opencv …
阅读更多...
JavaScript中关于数组的小挑战

JavaScript中关于数组的小挑战

史蒂芬仍在建立他的小费计算器&#xff0c;使用的规则与以前一样&#xff1a; 如果账单价值在50到300之间&#xff0c;小费为账单的15%&#xff0c;如果价值不同&#xff0c;小费为20%。 编写一个函数’calcTip’&#xff0c;将任何账单值作为输入&#xff0c;并返回相应的小费…
阅读更多...
【业务功能篇94】微服务-springcloud-springboot-认证服务-注册功能-第三方短信验证API

【业务功能篇94】微服务-springcloud-springboot-认证服务-注册功能-第三方短信验证API

商城认证服务 一、搭建认证服务环境 结合我们前面介绍的商城的架构我们需要单独的搭建一个认证服务。 1.创建项目 首先创建一个SpringBoot项目&#xff0c;然后添加对应的依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"htt…
阅读更多...
MySQL主从复制与读写分离 及其实例

MySQL主从复制与读写分离 及其实例

目录 主从复制与读写分离 1、MySQL主从复制原理 1.1、MySQL的复制类型 1.2、MySQL主从复制的工作过程 1.3、mysq支持的复制类型 1.4、 数据流向 1.5、主从复制的工作过程 2、读写分离 2.1、什么是读写分离&#xff1f; 2.2、为什么要读写分离呢&#xff1f; 2.3、什么…
阅读更多...
HFSS 3维曲线导入

HFSS 3维曲线导入

HFSS 3维曲线导入 简介环境参考代码使用结果 简介 如图一所示&#xff0c;CST中可以通过导入和到出由任意点组成的曲线&#xff0c;但是HFSS中貌似不能导入&#xff08;如图二所示&#xff09;&#xff0c;如果我们要将matlab的产生的曲线的点的数据导入特变麻烦&#xff0c;特…
阅读更多...
21.4 CSS 盒子模型

21.4 CSS 盒子模型

1. 边框样式 border-style属性: 指定元素的边框样式.常用属性值: - none: 无边框(默认值). - solid: 实线边框. - dotted: 点状边框. - dashed: 虚线边框. - double: 双线边框. - groove: 凹槽状边框. - ridge: 脊状边框. - inset: 内阴影边框. - outset: 外阴影边框.这些值可…
阅读更多...
Loki日志系统

Loki日志系统

1、Loki是什么&#xff1f; Loki是一个开源的日志聚合系统&#xff0c;由Grafana Labs开发和维护。它旨在帮助用户收集、存储和查询大规模的日志数据&#xff0c;帮助用户更好地理解和监控他们的应用程序和系统。 Loki的设计灵感来自于Prometheus&#xff0c;它采用了类似的标…
阅读更多...
【ROS 03】ROS通信机制进阶

【ROS 03】ROS通信机制进阶

上一章内容&#xff0c;主要介绍了ROS通信的实现&#xff0c;内容偏向于粗粒度的通信框架的讲解&#xff0c;没有详细介绍涉及的API&#xff0c;也没有封装代码&#xff0c;鉴于此&#xff0c;本章主要内容如下: ROS常用API介绍&#xff1b;ROS中自定义头文件与源文件的使用。…
阅读更多...
springboot 与异步任务,定时任务,邮件任务

springboot 与异步任务,定时任务,邮件任务

异步任务 在Java应用中&#xff0c;绝大多数情况下都是通过同步的方式来实现交互处理的&#xff1b;但是在处理与第三方系统交互的时候&#xff0c;容易造成响应迟缓的情况&#xff0c;之前大部分都是使用多线程来完成此类任务&#xff0c;其实&#xff0c;在Spring 3.x之后&a…
阅读更多...
2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书浙江师范大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书浙江师范大学图书馆

2023开学礼《乡村振兴战略下传统村落文化旅游设计》许少辉八一新书浙江师范大学图书馆
阅读更多...
【GUI开发】用python爬YouTube博主信息，并开发成exe软件

【GUI开发】用python爬YouTube博主信息，并开发成exe软件

文章目录 一、背景介绍二、代码讲解2.1 爬虫2.2 tkinter界面2.3 存日志 三、软件演示视频四、说明 一、背景介绍 你好&#xff0c;我是马哥python说&#xff0c;一名10年程序猿。 最近我用python开发了一个GUI桌面软件&#xff0c;目的是爬取相关YouTube博主的各种信息&#…
阅读更多...
算法：图解位运算以及鸽巢原理应用

算法：图解位运算以及鸽巢原理应用

文章目录 实现原理基础位运算位图思想找最右侧数按位异或 算法思路典型例题基础位运算只出现一次的数字只出现一次的数字III 经典题型判断字符是否唯一两整数之和只出现一次的数字II消失的两个数字 鸽巢原理总结 本篇总结位运算中常见的算法题和思路&#xff0c;首先总结位运算…
阅读更多...
边写代码边学习之TF Attention

边写代码边学习之TF Attention

1. 什么是Attention 注意力机制&#xff08;Attention Mechanism&#xff09;是机器学习和人工智能领域中的一个重要概念&#xff0c;用于模拟人类视觉或听觉等感知过程中的关注机制。注意力机制的目标是让模型能够在处理信息时&#xff0c;更加关注与任务相关的部分&#xff…
阅读更多...
TDengine（2）：wsl2+ubuntu20.04+TDengine安装

TDengine（2）：wsl2+ubuntu20.04+TDengine安装

一、ubuntu系统下提供了三种安装TDengine的方式&#xff1a; 二、通过 apt 指令安装失败 因为是linux初学者&#xff0c;对apt 指令较为熟悉&#xff0c;因此首先使用了该方式进行安装。 wget -qO - http://repos.taosdata.com/tdengine.key | sudo apt-key add -echo "…
阅读更多...
windows使用-设置windows的远程访问用户数量

windows使用-设置windows的远程访问用户数量

文章目录 前言相关操作总结前言 作为IT工程师，使用服务器做相应的软件操作时常有的事。最近一段时间，我们的团队多个成员都需要远程登录到一台windows2003Server的服务器处理相应的业务。而默认情况下，Windows系统只允许一名用户远程到服务器上，这给小伙伴的工作造成一些不…
阅读更多...
React-native环境配置与项目搭建

React-native环境配置与项目搭建

基础环境搭建 安装 node.js &#xff08;版本>12 ,推荐安装LTS稳定版本&#xff09; 安装 Yarn &#xff08;npm install -g yarn&#xff09; 安装 react native 脚手架 (npm install -g react-native-cli) windows 只能搭建Android 开发环境 Mac 下既能搭建Android 环境&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023