1. Toy模板网首页
  2. > Toy博客

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

7月前 作者：Qt程序员 分类：Toy博客 阅读(56) 违法举报

这篇具有很好参考价值的文章主要介绍了Qt开发教程：C++与QML的交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在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模块，面试题等等）↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓文章来源地址https://www.toymoban.com/news/detail-853002.html

// 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开发教程：C++与QML的交互的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【QT】C++和QML使用多线程优化界面切换卡顿的方法

    【QT】C++和QML使用多线程优化界面切换卡顿的方法

    qt提供了一种声明式语言qml，可以使用一些可视组件以及这些组件之间的交互来描述用户界面，而c++可以只负责后台逻辑的处理，将界面和后台分离开来，由qml来做UI界面，c++负责后端处理，对我个人来说，这样的方式大大的方便了对界面和逻辑的修改和维护； 由于UI界面是工

    2024年01月19日
    浏览(42)
  • QML学习十三：QML与C++交互之C++端发送信号绑定QML端

    QML学习十三：QML与C++交互之C++端发送信号绑定QML端

    若该文为原创文章，转载请注明原文出处 本篇记录下C++端发送的信号是如何绑定QML端的，通过学习，对QML端发送信号绑定C++端有所了解，绑定的方式有三个，项目实际使用的是connect,这个也是我在项目中最常用到的。 那C++端发送的一个信号，在QML如何绑定并接收处理呢？ 注

    2023年04月08日
    浏览(35)
  • 【qml-1】第一次尝试qml与c++交互

    【qml-1】第一次尝试qml与c++交互

    【qml-2】尝试一个有模式的qml弹窗-CSDN博客 目的是学习qml，因为看到很多qml的酷炫效果，想试一试。 看过网上一些代码，qt提供的工具类好几个，看着就晕。只想提炼一下，做个记录。 我先整理了一套自己的想法：所谓交互，还是qt的信号槽。既然是前后端分离设计，就尽量

    2024年01月19日
    浏览(46)

  • QML与C++交互

    目录 1 QML获取C++的变量值 2 QML获取C++创建的自定义对象 3 QML发送信号绑定C++端的槽 4 C++端发送信号绑定qml端槽 5 C++调用QML端函数 1 QML获取C++的变量值 全局对象 上下文属性 在qml中可全局直接使用test  2 QML获取C++创建的自定义对象 光标放在成员变量m_iValue和m_sString后面 Alt + En

    2024年02月12日
    浏览(40)
  • QML 与C++交互详解

    QML 与C++交互详解

    1.思维导图 2.调用全局变量 在C++中直接定义全局变量，QML中能够直接访问。 使用engine.rootContext()-setContextProperty(\\\"WIDTH\\\",300)，设置了一个全局变量WIDTH。 QML中直接访问WIDTH。  3.QML中调用C++类型 自定义一个C++类 MyObject 对象，有两个成员变量m_value和m_str，分别对应一个set和一个

    2024年02月02日
    浏览(34)
  • qml与C++的交互

    qml与C++的交互

    qml端使用C++对象类型、qml端调用C++函数/c++端调用qml端函数、qml端发信号-连接C++端槽函数、C++端发信号-连接qml端函数等。 代码资源下载： https://download.csdn.net/download/TianYanRen111/88779433 若无法下载，直接拷贝以下代码测试即可。 main.cpp MyObject.h MyObject.cpp TestObject.h main.qml 参考文

    2024年01月25日
    浏览(41)

  • QML与C++交互详解

    在现代软件开发中，图形用户界面（GUI）是用户与程序交互的重要组成部分。Qt框架提供了一种强大的方式来构建跨平台的GUI应用程序，其中QML（Qt Meta-Object Language）和C++的交互是一个重要的主题。本篇博文将深入探讨如何在QML中创建和操作C++对象，实现双向的交互。 在Qt中，

    2024年01月20日
    浏览(37)

  • QML和C++交互中，实现C++中connect到qml的信号，再从qml发射信号传递数据给C++的一种方式

    假设我们有一个需求，要求在用户点击列表中的项目时，不仅在控制台上输出项目的名称，还要在C++端进行一些处理。我们希望在C++端能够接收到用户点击的项目名称，并进行相应的处理。 在这种情况下，我们可能会遇到一个常见的问题：如何在QML中捕获用户点击事件，并将

    2024年02月05日
    浏览(58)
  • QML与C++的交互操作

    QML与C++的交互操作

      QML旨在通过C ++代码轻松扩展。Qt QML模块中的类使QML对象能够从C ++加载和操作，QML引擎与Qt 元对象系统 集成的本质使得C ++功能可以直接从QML调用。这允许开发混合应用程序，这些应用程序是通过混合使用QML，JavaScript和C ++代码实现的。除了从QML访问C ++功能的能力之外，Qt

    2024年02月09日
    浏览(37)
  • Qt之qml和widget混合编程调用

    Qt之qml和widget混合编程调用

    首先是创建一个widget项目 然后需要添加qml和quick的插件使用 QT += quickwidgets qml 接着要在界面上创建一个quickwidget和按钮 创建一个c++对象类 QObjectQml cpp实现文件 注册c++对象到系统中 接着c++的界面对象中调用即可 qml文件的实现如下： 运行结果如下：

    2024年02月14日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包