Qt开发教程：C++与QML的交互

最新推荐文章于 2024-04-16 11:08:33 发布
最新推荐文章于 2024-04-16 11:08:33 发布
阅读量1.2k 收藏 7
点赞数 3
分类专栏： qt开发 文章标签： qt c++ 交互 QML Qt开发 Qt编程 QT教程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hw5230/article/details/134398826
版权

在Qt中实现C++与QML的交互

Qt是一个功能强大的跨平台应用程序开发框架，支持同时使用C++和QML来开发应用程序。通过C++与QML的交互，我们可以实现更灵活、更强大的应用程序。本文将详细介绍如何在Qt中创建自定义对象、在QML端发送信号并绑定到C++端、在C++端发送信号并绑定到QML端、以及实现QML端直接调用C++端函数和C++端直接调用QML端函数的方法。

1、创建自定义对象

在Qt中，我们可以使用QObject作为基类创建自定义对象。首先，我们需要在C++中定义一个继承自QObject的类，并将其注册到QML中，使得QML可以访问到这个对象。具体的步骤如下：

  • 创建一个新的C++类，例如MyObject，并继承自QObject。
  • 在MyObject类中声明需要在QML中访问的属性和函数，并使用Q_PROPERTY和Q_INVOKABLE宏进行标记。
  • 在MyObject类中添加需要在QML中访问的信号，并使用Q_SIGNAL宏进行标记。
  • 在MyObject类中添加相应的槽函数，并在函数实现中处理信号的逻辑。
  • 在Qt的主程序中，使用qmlRegisterType函数将MyObject类注册到QML引擎中。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（Qt实战项目视频教程+代码，C++语言基础，C++设计模式，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT   
    // 宏标记
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    
public:
    explicit MyObject(QObject *parent = nullptr);
    
    int value() const;
    void setValue(int newValue);
signals:
    void valueChanged(int newValue);

public slots:
    void handleButtonClicked();
};

// MyObject.cpp

#include "MyObject.h"

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

int MyObject::value() const
{
    return m_value;
}

void MyObject::setValue(int newValue)
{
    if (m_value != newValue) {
        m_value = newValue;
        emit valueChanged(m_value);
    }
}

void MyObject::handleButtonClicked()
{
    // 处理按钮点击逻辑
}

// MyObject.cpp

#include "MyObject.h"

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

int MyObject::value() const
{
    return m_value;
}

void MyObject::setValue(int newValue)
{
    if (m_value != newValue) {
        m_value = newValue;
        emit valueChanged(m_value);
    }
}

void MyObject::handleButtonClicked()
{
    // 处理按钮点击逻辑
}

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "MyObject.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

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

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

在上述代码中，我们创建了一个名为MyObject的自定义对象，并将其注册到QML中。在QML中，可以通过import MyObject 1.0语句引入这个自定义对象，并使用MyObject来创建实例。


// main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

import MyObject 1.0   // 导入自定义类

Window {
    visible: true
    width: screenW
    height: 480
    title: qsTr("Hello World")
  	
  	// 使用
  	MyObject {
		id : myobj
		console.log(myobj.value)
	}
}

2、在QML中发送信号并绑定到C++端

  1. 在QML中定义一个信号，使用signal关键字标记。
// MyItem.qml

import QtQuick 2.15

Item {
    signal mySignal(string message)   // 定义信号

    // ...
}

2.在需要触发信号的地方，调用signal关键字标记的函数，并传递相应的参数。

// MyItem.qml

Button {
    text: "Send Signal"
    onClicked: {
        mySignal("Hello from QML")    // 点击按钮出触发信号
    }
}

3.在C++中，连接QML中的信号到相应的槽函数，以便在信号被触发时执行相应的操作。

// MyObject.h

#include <QObject>

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

public slots:
    void handleSignal(QString message);    // 接受信号的槽函数
};

// MyObject.cpp

#include "MyObject.h"

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

void MyObject::handleSignal(QString message)
{
    // 处理接收到的信号
    qDebug() << "Received signal from QML:" << message;
}

4.在Qt的主程序中，注册自定义类

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "MyObject.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    MyObject myObject; // 创建C++对象

    // 注册自定义对象到QML
    qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject");
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

5.在QML中，使用Connections元素将信号与C++槽函数进行绑定。

// main.qml

import QtQuick 2.15

Item {
   // 信号连接
    Connections {
        target: myItem
        onMySignal: {
            myObject.handleSignal(message)
        }
    }

    MyItem {
        id: myItem
        
    }
}

在上述代码中，我们在QML的MyItem中定义了一个名为mySignal的信号。在按钮被点击时，我们调用了mySignal函数并传递了一个参数。在C++中，我们创建了一个名为MyObject的对象，并在main.qml中将其注册为myObject。然后，在Connections元素中，我们将myItem的mySignal信号与myObject的handleSignal槽函数进行绑定，以便在信号被触发时调用相应的槽函数。

这样，当在QML中触发mySignal信号时，会调用myObject的handleSignal槽函数，并将相应的参数传递给它。

这样完成了在QML端发送信号并绑定到C++端的过程

3、在C++端发送信号并绑定到QML端

在C++中，我们可以通过定义信号并在特定事件发生时发送信号，然后将这些信号与QML端的函数进行绑定。具体的步骤如下：

在C++的自定义对象中定义信号，并使用Q_SIGNAL宏进行标记。

在需要触发信号的地方，调用emit关键字标记的函数发送信号。

在QML中，使用Connections元素将C++的信号与QML的函数进行绑定。

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    
public:
    explicit MyObject(QObject *parent = nullptr);

    int value() const;
    void setValue(int newValue);

signals:
    void valueChanged(int newValue);
    void buttonClicked();

public slots:
    void handleButtonClicked();
};

// MyObject.cpp

#include "MyObject.h"

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

int MyObject::value() const
{
    return m_value;
}

void MyObject::setValue(int newValue)
{
    if (m_value != newValue) {
        m_value = newValue;
        emit valueChanged(m_value);
    }
}

void MyObject::handleButtonClicked()
{
	// 发送信号
    emit buttonClicked();
}

// main.qml

import

 QtQuick 2.15
import com.example 1.0

Item {
    width: 400
    height: 300

	// 信号连接
    Connections {
        target: myObject
        onButtonClicked: {
            console.log("Button clicked");
        }
    }

    MyObject {
        id: myObject
        onValueChanged: {
            console.log("New value:", newValue);
        }
    }

    Button {
        text: "Click me"
        onClicked: {
            myObject.handleButtonClicked();
        }
    }
}

在上述代码中，我们在MyObject对象的handleButtonClicked函数中发射了一个名为buttonClicked的信号。在QML中，使用Connections元素将buttonClicked信号与相应的处理函数进行绑定。

4、QML端直接调用C++端函数

在QML中，我们可以直接调用C++端的函数，以便在应用程序的逻辑中实现更高级的功能。具体的步骤如下：

在C++的自定义对象中声明需要在QML中访问的函数，并使用Q_INVOKABLE宏进行标记。

在QML中，通过直接引用C++对象的属性和函数的方式来调用这些函数。

// MyObject.h

#include <QObject>

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int value READ value WRITE setValue NOTIFY valueChanged)
    
public:
    explicit MyObject(QObject *parent = nullptr);

    int value() const;
    void setValue(int newValue);

    Q_INVOKABLE void cppFunction();

signals:
    void valueChanged(int newValue);

public slots:
    void handleButtonClicked();
};

// main.qml

import QtQuick 2.15
import com.example 1.0

Item {
    width: 400
    height: 300

    MyObject {
        id: myObject
        onValueChanged: {
            console.log("New value:", newValue);
        }
    }

    Button {
        text: "Click me"
        onClicked: {
            myObject.handleButtonClicked();
            myObject.cppFunction();
        }
    }
}

在上述代码中，我们在MyObject对象中声明了一个名为cppFunction的函数，它被标记为可在QML中调用。在QML中，通过myObject.cppFunction()的方式来调用这个函数。

5、C++端直接调用QML端函数

在C++中，我们可以直接调用QML中定义的函数，以便在应用程序的逻辑中实现更高级的功能。具体的步骤如下：

在QML中，使用QtObject元素为QML文件中的函数创建一个对象，并给这个对象设置一个id。

在C++中，使用QVariant和QMetaObject来调用QML中定义的函数。

// main.qml

import QtQuick 2.15

QtObject {
    id: qmlFunctions

    function qmlFunction() {
        console.log("QML function called");
    }
}

// main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QMetaObject>
#include <QMetaMethod>

int main(int argc, char *argv[])
{
    Q

GuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    // 调用QML中的函数
    QObject* rootObject = engine.rootObjects().first();
    QObject* qmlFunctions = rootObject->findChild<QObject*>("qmlFunctions");
    if (qmlFunctions) {
        const QMetaObject* metaObject = qmlFunctions->metaObject();
        int index = metaObject->indexOfMethod("qmlFunction()");
        if (index != -1) {
            QMetaMethod method = metaObject->method(index);
            method.invoke(qmlFunctions);
        }
    }

    return app.exec();
}

在上述代码中，我们在QML中使用了QtObject元素来定义了一个名为qmlFunction的函数。在C++中，我们使用QMetaObject和QMetaMethod来调用这个函数。

6、结论

通过C++与QML的交互，我们可以创建自定义对象，并在C++与QML之间实现信号的发送和绑定。我们还可以在QML端直接调用C++端的函数，以及在C++端直接调用QML端的函数。这种交互使得我们可以更加灵活地开发应用程序，并实现更高级的功能。

本文福利，莬费领取Qt开发学习资料包、技术视频，内容包括（Qt实战项目视频教程+代码，C++语言基础，C++设计模式，Qt编程入门，QT信号与槽机制，QT界面开发-图像绘制，QT网络，QT数据库编程，QT项目实战，QSS，OpenCV，Quick模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓

Qt程序员
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QML进阶(八)实现QML界面与C++类型交互
yang1fei2的博客
05-08 4399
在QML工程中，一般QML界面只负责前端交互，而真正的业务逻辑都是C++模块实现的。为了实现前端和后端的顺利衔接，我们需要做好QML界面与C++的交互。这里就介绍一下如何在QML中调用对应的C++模块。在QML中调用C++模块的方法主要有三种，分别是: 1.设置上下文属性(setContextProperty()) 2.在QML引擎里面注册新类型(qmlRegisterType) 3.导出对应的QML扩展插件。 下面介绍一下三个方法的优缺点: 对于小型应用来说，方法一设置上下文属性是最简单实用的方
qml与Qt数据交互
12-26
现在做开发越来越多地使用qml语言进行ui开发了，因为qml可以快速简单地进行开发。qml其实也是基于qt框架上的，所以很多地一些知识都是从C++哪里可以找得到原型的。在使用qml开发界面就会少不了要与从qt进行数据的交换了。qml负责ui部分，而qt负责逻辑控制部分，各分职责。为什么要这样呢？qml作为ui界面的写法是有原因的，qml从设计开始就时着重与ui的快速开发，所以在逻辑控制上会弱很多，特别是在网络通讯上面就必须要qt这边实现了。这篇经验时介绍如何使用Qt与qml的数据交互。
c++与QML相互通信 数据交互
01-10
c++数据传入qml， qml数据返回给c++，数据互传 ，两种方式
QT C++ 与 qml 通信
FCzhandu0的专栏
02-21 2309
QML与c++交互学习笔记(一) 说明，主要是对QT的文档内例子进行的一些分别解说，希望更容易的理解 C++导出到QML的过程。   1.导出一个简单的类Person 2.具体导出过程 假设我们要导出一个Person类，       A 那么就要考虑如何的一个类他才可以导出呢？      他需要符合一定的条件     1.继承自QObject     2.有默认构造函数  
QML与C++信号连接的奥秘：深入解析QML发送信号的原理与应用
qq_44103359的博客
04-16 395
本文将详细介绍如何在QML与C++之间实现信号连接，以及如何在QML中发送信号。文章将涵盖QML与C++信号连接的基本概念、原理、实现步骤以及实际应用案例。通过本文的学习，读者可以掌握QML与C++信号连接的基本技巧，并在实际项目中得心应手。
【QML 与 C++ 之间的通讯机制】QML 与 Qt 通讯:讲解如何在QML 中使用C++类，以及如何在C++ 中获取QML的内容
探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
03-18 541
【QML 与 C++ 之间的通讯机制】
【Qt】QML与C++的前后端交互与通信方法
亦梦亦醒乐逍遥的博客
08-25 4105
QML技术是纯粹的脚本语言，和C++前后端分离，而且还融合了JavaScript，所以可以实现强大的UI设计功能。 前后端分离，优点在于好看，缺点就是通信代价比较高，qt自带的有个ui指针，很容易操纵，但是QML是没有直接操纵的方法的。 用QML做项目一定要注重前后端通信，这也是和普通项目之间很大的区别，与消耗。......
C++与QML交互总结
hsy12342611的专栏
02-13 1万+
C++与QML交互
Qt之QML学习（一）——初步认识QML
热门推荐
疯狂挖掘机的博客
09-01 1万+
市面上书籍不多，我推荐《qt quick核心编程》，需要电子档可以私信我。前后我看了好几篇，手头工具书，说的还是很全.
Qml与C++交互
SuperYu的博客
03-09 3013
Qml与C++交互 文档如是说，使用C ++代码中定义的功能可以轻松扩展QML。 由于QML引擎与Qt元对象系统的紧密集成，可以从QML代码访问由QObject派生的类适当公开的任何功能。 这使得C ++类的属性和方法可以直接从QML访问，通常很少或无需修改。 QML引擎能够通过元对象系统内省QObject实例。 这意味着， 任何QML代码都可以访问QObject派生类实例的以下成员： 属性（使用Q_PROPERTY注册的属性） 方法（需注册为public slots或是标记为Q_INVOKABLE）
QT之QML
顺其自然~专栏
05-26 6196
QML（Qt Meta-object Language）是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS（参考后文具体例子），但又支持javascript形式的编程控制。QtDesigner可以设计出·ui界面文件，但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互，但是有一个缺点，如果要在脚本中创建一个继承于QObject的图形对象非常不方便，只能在Qt代码中创建图形对象，然后从QtScript中进行访问。而QML可以在脚本里创建图形对象，并且支持各种图形
Qt6.2搭配QtDS，采用QML作为UI界面，C++与QML交互处理逻辑，开发的多功能串口助手，供学习使用
05-11
Qt6.2搭配QtDS，采用QML作为UI界面，C++与QML交互处理逻辑，开发的多功能串口助手，供学习使用
Qt之QML与 C++ 交互.docx
07-02
1. C++ 对象注册到 QML，QML 访问 C++ 对象； 2. QML 暴露对象给 C++ 进行交互； 3. C++ 创建 QML 对象并进行交互； 4. C++ 对象与 QML 通过信号槽交互。 文档详细描述了四种方式的使用
Qt Quick之QML与C++交互方法PPT
05-13
Qt Quick技术使得开发者能够快速构建UI，而其所使用的语言——QML作为一种灵活高效的界面开发语言也得到业界的...此次Webinar将向大家介绍QML与C++的交互方式，通过例子来展示应用方法，为我们后续的产品开发提供便利。
QT6实战-QML与C++联合编程教程
最新发布
05-14
Qt框架提供了一种强大的方式来构建跨平台的GUI应用程序，其中QML（Qt Meta-Object Language）和C++的交互是一个重要的主题。本篇博文将深入探讨如何在QML中创建和操作C++对象，实现双向的交互。 在Qt中，任何QML...
C++和QML交互
05-10
Qt 提供了两种在 QML 环境中使用 C++ 对象的方式： 1. 在 C++ 中实现一个类，注册到 QML 环境中， QML 环境中使用该类型创建对象 2. 在 C++ 中构造一个对象，将这个对象设置为 QML 的上下文属性，在 QML 环境中直接...
QML与Qt C++ 交互机制探讨与总结
Embedded
11-23 974
介绍 QML和 C++对象可以通过，signals,slots和 属性修改进行交互。对于一个C++对象，任何数据都可以通过Qt的 Meta-Object System暴露给QML（何总方法，后面介绍），同时，任何的QML对象数据通过Meta-object system在C++端直接访问。 在实际的项目中很多地方会用到QML与Qt C++交互。在这里总结了若干方法供大家参考，欢迎大家指导和拍
QML与C++ 交互详解
weixin_42252757的博客
09-15 1359
QML 如何使用C++ 类
C++与QML通信
MichaelKongChina的博客
11-27 1330
C++ 与QML可以理解为两个平行的世界，由于很多Qt的模块无法直接在QML中使用，因此在业务开发的过程中，对于C++ 与QML的分工往往是使用QML来构建界面，使用C++ 来实现非界面的业务逻辑开发，所以我们会频繁使用到C++ 与QML的交互，因此对我在开发过程中经常使用的交互方法进行一个梳理。 对所有的交互方式给出三类总结： 1.推荐使用的原有框架：Qt Quick有一套Model-View-Delegate框架，在这套框架里面完成了C++ 与QML的通信，这个方式在另一篇文章“Model-View-D
Qt qml怎么跟C++交互？
04-22
对于Qt QML和C的交互，可以使用Qt中提供的Qt C++桥接机制。主要包括两个方面：一是在C++代码中定义一个QObject派生类，提供和QML交互的接口；二是在QML中使用Qt的官方插件QtObject来访问C++对象。 具体的实现步骤为： 1. 定义C++类并继承QObject，将需要暴露给QML调用的函数用Q_INVOKABLE修饰。 2. 在main.cpp中注册QML与C++类之间的桥接，使用qmlRegisterType()函数进行注册。 3. 在QML中使用import导入C++类所在的库，然后实例化对象并调用其方法。 例如： C++代码： class MyObject : public QObject { Q_OBJECT public: Q_INVOKABLE void myMethod(QString str); }; void MyObject::myMethod(QString str) { qDebug() << "Received message:" << str; } // main.cpp中进行对象的桥接 qmlRegisterType<MyObject>("MyObject", 1, 0, "MyObject"); QML代码： import MyObject 1.0 Item { MyObject { id: myObj } Button { text: "Send message" onClicked: { myObj.myMethod("Hello from QML") } } } 这样，当点击按钮时，QML会调用MyObject对象的myMethod()方法并传递一条消息。 希望能够解决您的疑问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值