C++ 与 QML 之间进行数据交互的几种方法

最新推荐文章于 2024-06-15 10:14:49 发布
最新推荐文章于 2024-06-15 10:14:49 发布
阅读量1.9k 收藏 20
点赞数
分类专栏： C++Linux后端 Qt开发 文章标签： c++ 交互 qt QML Qt开发 C++数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60259116/article/details/134163270
版权

一、属性绑定

这是最简单的方式，可以在QML中直接绑定C++ 对象的属性。通过在C++ 对象中使用Q_PROPERTY宏定义属性，然后在QML中使用绑定语法将属性与QML元素关联起来。

  1. person.h
#include <QObject>

class Person : public QObject
{
    Q_OBJECT
    /* 使用 Q_PROPERTY 定义交互的属性 */
    Q_PROPERTY(QString name READ getName WRITE setName NOTIFY nameChanged)
    Q_PROPERTY(int age READ getAge WRITE setAge NOTIFY ageChanged)

public:
    explicit Person(QObject *parent = nullptr)
        : QObject(parent), m_name(""), m_age(0)
    {
    }

    /* 为属性提供 getter 和 setter 方法 */
    QString getName() const { return m_name; }
    void setName(const QString& name) { m_name = name; emit nameChanged(); }

    int getAge() const { return m_age; }
    void setAge(int age) { m_age = age; emit ageChanged(); }

signals:
    /* 信号与属性对应，通过信号通知其他对象属性的变化 */
    void nameChanged();
    void ageChanged();

private:
    QString m_name;
    int m_age;
};

本文福利， 免费领取C++学习资料包、技术视频/代码，1000道大厂面试题，内容包括（C++基础，网络编程，数据库，中间件，后端开发，音视频开发，Qt开发）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

2.main.cpp

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

int main(int argc, char *argv[])
{
    /* 启用Qt应用程序的高DPI缩放功能 */
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    /* 创建一个Qt应用程序的实例 */
    QGuiApplication app(argc, argv);

    // 创建Person对象
    Person person;

    QQmlApplicationEngine engine;

    /* 将Person对象作为QML上下文属性 */
    engine.rootContext()->setContextProperty("person", &person);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    /* 将 QQmlApplicationEngine 对象的 objectCreated 信号连接到一个 lambda 函数上 */
    /* lambda 函数用于在 QML 文件中的根对象被创建时进行处理，检查对象是否成功创建，如果创建失败则退出应用程序 */
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    /* 加载QML文件并显示用户界面 */
    engine.load(url);

    return app.exec();
}

3.main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

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

    Column {
        spacing: 10

        TextField {
            placeholderText: "请输入姓名"
            text: person.name // 与Person对象的name属性绑定
            onTextChanged: person.name = text // 当文本改变时，更新Person对象的name属性
        }

        Slider {
            from: 0
            to: 100
            value: person.age // 与Person对象的age属性绑定
            onValueChanged: person.age = value // 当滑块值改变时，更新Person对象的age属性
        }

        Text {
            text: "姓名：" + person.name
        }

        Text {
            text: "年龄：" + person.age
        }
    }

}

二、信号与槽

C++ 对象可以发出信号，而QML中的元素可以连接到这些信号上。这样，当C++ 对象的状态发生变化时，可以通过信号与槽机制将这些变化传递给QML界面。

  1. myobject.h
#include <QObject>
#include <QtDebug>

class MyObject : public QObject
{
    Q_OBJECT

public:
    explicit MyObject(QObject *parent = nullptr) : QObject(parent) {}

signals:
    void mySignal(QString message);

public slots:
    void mySlot(const QString& message) { qDebug() << "Received message from QML:" << message; emit mySignal("Hello from C++");}
};

2.main.cpp

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

int main(int argc, char *argv[])
{
    /* 启用Qt应用程序的高DPI缩放功能 */
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    /* 创建一个Qt应用程序的实例 */
    QGuiApplication app(argc, argv);

    /* 将自定义 C++ 类型注册到 QML 中的函数, 将自定义 C++ 类型注册到 QML 中的函数 */
    qmlRegisterType<MyObject>("com.example", 1, 0, "MyObject");

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    /* 将 QQmlApplicationEngine 对象的 objectCreated 信号连接到一个 lambda 函数上 */
    /* lambda 函数用于在 QML 文件中的根对象被创建时进行处理，检查对象是否成功创建，如果创建失败则退出应用程序 */
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    /* 加载QML文件并显示用户界面 */
    engine.load(url);

    return app.exec();
}

3.main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import com.example 1.0

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

    /* 定义 sendToCpp 信号 */
    signal sendToCpp(string message)

    /* Connections 组件用于连接 myObject 的 onMySignal 信号 */
    Connections {
        target: myObject
        onMySignal: console.log("Received message from C++:", message)
    }

    MyObject {
        id: myObject
        /* 将 onMySignal 信号传递到 sendToCpp信号上，便于 QML 处理 */
        onMySignal: sendToCpp(message)
    }

    Button {
        text: "Send message to C++"
        anchors.centerIn: parent
        /* 单击按钮时，会将信号传递到 C++ 的 mySlot 槽上 */
        onClicked: myObject.mySlot("Hello from QML")
    }
}

三、模型视图

模型视图（Model-View）：可以使用C++ 中的数据模型（QStandardItemModel）来提供数据给QML界面。QML中的视图元素（如ListView或GridView）可以使用这些模型来显示数据。

  1. mymodel.h
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QList>

class MyModel : public QAbstractListModel
{
    Q_OBJECT

public:
    explicit MyModel(QObject *parent = nullptr);

    enum {
        NameRole = Qt::UserRole + 1,
        AgeRole,
        EmailRole
    };

    // 重写以下几个虚函数
    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
    QHash<int, QByteArray> roleNames() const override;

private:
    struct Person {
        QString name;
        int age;
        QString email;
    };

    QList<Person> m_persons;
};

#endif // MYMODEL_H

2.mymodel.cpp

age-cpp">#include "mymodel.h"

MyModel::MyModel(QObject *parent)
    : QAbstractListModel(parent)
{
    // 初始化一些数据
    m_persons.append({"Alice", 25, "alice@example.com"});
    m_persons.append({"Bob", 30, "bob@example.com"});
    m_persons.append({"Charlie", 35, "charlie@example.com"});
}

int MyModel::rowCount(const QModelIndex &parent) const
{
    Q_UNUSED(parent);
    return m_persons.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
    if (!index.isValid())
        return QVariant();

    if (index.row() >= m_persons.count() || index.row() < 0)
        return QVariant();

    const Person &person = m_persons[index.row()];
    if (role == NameRole)
        return person.name;
    else if (role == AgeRole)
        return person.age;
    else if (role == EmailRole)
        return person.email;

    return QVariant();
}

QHash<int, QByteArray> MyModel::roleNames() const
{
    QHash<int, QByteArray> roles;
    roles[NameRole] = "name";
    roles[AgeRole] = "age";
    roles[EmailRole] = "email";
    return roles;
}

3.main.cpp

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

int main(int argc, char *argv[])
{
    /* 启用Qt应用程序的高DPI缩放功能 */
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    /* 创建一个Qt应用程序的实例 */
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    MyModel myModel;
    engine.rootContext()->setContextProperty("myModel", &myModel);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    /* 将 QQmlApplicationEngine 对象的 objectCreated 信号连接到一个 lambda 函数上 */
    /* lambda 函数用于在 QML 文件中的根对象被创建时进行处理，检查对象是否成功创建，如果创建失败则退出应用程序 */
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    /* 加载QML文件并显示用户界面 */
    engine.load(url);

    return app.exec();
}

4.main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

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

    ListView {
        anchors.fill: parent
        model: myModel
        delegate: Item {
            width: parent.width
            height: 60
            Column {
                Text { text: name }
                Text { text: age }
                Text { text: email }
            }
        }
    }
}

四、QML类型注册

QML类型注册（QML Type Registration）：可以将C++ 对象注册为自定义的QML类型，使得QML可以直接创建和使用这些对象。通过在C++ 中使用 Q_PROPERTY 宏和 Q_INVOKABLE 函数，可以将C++ 类注册为QML类型。我需要这样一个案例

  1. myobject.h
#include <QQmlEngine>
#include "QDebug"

class MyObject : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
public:
    explicit MyObject(QObject *parent = nullptr) : QObject(parent) {}
    QString name() const { return m_name; }
    void setName(const QString &name) { m_name = name; emit nameChanged(); }
    Q_INVOKABLE void printName() { qDebug() << "Name:" << m_name; }

    static void registerQmlType()
    {
        qmlRegisterType<MyObject>("com.example", 1, 0, "MyObject");
    }

signals:
    void nameChanged();
private:
    QString m_name;
};

2.main.cpp

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

int main(int argc, char *argv[])
{
    /* 启用Qt应用程序的高DPI缩放功能 */
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    /* 创建一个Qt应用程序的实例 */
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    MyObject::registerQmlType();

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    /* 将 QQmlApplicationEngine 对象的 objectCreated 信号连接到一个 lambda 函数上 */
    /* lambda 函数用于在 QML 文件中的根对象被创建时进行处理，检查对象是否成功创建，如果创建失败则退出应用程序 */
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    /* 加载QML文件并显示用户界面 */
    engine.load(url);

    return app.exec();
}

3.main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import com.example 1.0

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

    MyObject {
        id: myObject
        name: "John"
    }

    /* 垂直布置组件 */
    Column {
        anchors.fill: parent        // 大小为父组件的大小
        anchors.margins: 40         // 与父组件四周的间隔
        spacing: 10                 // 子组件之间的间隔

        Text {
            text: myObject.name
        }

        Button {
            text: "Print Name"
            onClicked: myObject.printName()
        }
    }
}

本文福利， 免费领取C++学习资料包、技术视频/代码，1000道大厂面试题，内容包括（C++基础，网络编程，数据库，中间件，后端开发，音视频开发，Qt开发）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

程序员老舅
关注
  • 0
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
qml 和 c++类的数据交互
notfindjob的博客
05-10 234
QML和C++类的交互，QML数据实时写入PDF文件
【QML笔记】QML与C++实现数据交互
疯花正猫的博客
01-15 1411
在QML开发中，往往将QML用作UI开发，CPP用作业务处理，这样可以很方便地引入Model/View/Delegate)等框架以降低项目代码间的耦合度。因此，QML和C++之间的数据交互是必不可少的一部分。本文考虑到实际开发需要，介绍在qml侧调用c++接口、信号、属性的方式。
QT编写的界面自动适应显示器分辨率
最新发布
小柚子的博客
06-15 331
（注意： 需要加在QApplication实例化之前，否则无效。## QT编写的界面自动适应显示器分辨率。在main()函数中加入如下代码。
QML 与C++交互详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
03-16 3248
1.Qt 的元对象系统Qt 的元对象系统（Meta-Object System）提供了对象之间通信的信号与槽机制、运行时类型信息和动态属性系统。在一个类的 private 部分声明 Q_OBJECT宏，使得类可以使用元对象的特性，如动态属性、信号与槽。自定义一个C++类 MyObject 对象，有两个成员变量m_value和m_str，分别对应一个set和一个get方法，还有一个信号，还是使用上面的类，首先在C++中增加一个槽函数，打印一些信息。还是使用上面的类，首先在C++中增加一个信号。
QML学习笔记【06】：QML与C++交互
hurryddd
01-01 1730
QML与C++交互
Qt之QML学习（二）——QML与C++之间交互的几种方法
疯狂挖掘机的博客
09-13 2904
前言 QML作为界面，在简单的交互中可能EMCA通过事件就可以解决简单的交互，但是往往复杂的计算或者用到后台一些服务的时候往往用C++去开发，这就需要两者互相传递数据，实际过程中，在QML与C++交互用的最多的就是QString和QjsonObject两种类型，下面总结一下方法并提供案列。 一、 二、案例 三、案例 1.引入库 2.读入数据 总结 ...
Qt工作笔记-QML与C++交互
IT1995的博客
07-25 5265
程序运行截图如下：   逻辑： 1.使用Q_PROPERTY宏让元对象能对这个数据成员进行访问 2.在QML系统中注册C++ 3.qml进行调用，实现qml与C++的交互   源码如下： testproperty.h #ifndef TESTPROPERTY_H #define TESTPROPERTY_H #include &lt;QObject&gt; class ...
QML与 C++ 交互（一）
m0_73482095的博客
12-12 201
我们将 QmlCpp 的头文件引用进来，然后定义一个 QmlCpp 类的实例，调用设置整型的函数，并将这个 C++ 实例注册到 Qml 引擎上下文中标示为 “QmlCpp” 的名字， 这样 Qml 中就可以通过 QmlCpp 来访问这个 C++ 实例。然后增加一个信号，这个信号后一章节会介绍，这节我们先关注属性的访问 这句代码的意思是定义一个名称为 value 的属性，读取属性的函数是 getValue，写入属性的函数是 setValue，当属性变化是触发的信号是 valueChanged。
Qml与C++通信交互
11-21
在Qt中，QML与C++的交互主要通过以下几种方式： 1. **QObject子类和Q_INVOKABLE**：在C++中，创建一个继承自QObject的类，并使用Q_OBJECT宏。然后，可以将需要在QML中调用的成员函数标记为Q_INVOKABLE。这样，这些...
QML2与C++交互
07-12
在QML与C++交互的过程中，主要涉及以下几个关键概念： 1. **QQmlEngine**：这是QML的运行时环境，负责解析和加载QML文件，以及管理QML对象的生命周期。 2. **QQmlComponent**：它用于加载和实例化QML文件中的单个...
QML--实现与HTML的交互
01-10
实现QML与HTML5的交互主要有以下几种方式： 1. **JavaScriptBridge** (Qt4): 在QQuickWebView中，可以使用`evaluateJavaScript`方法执行JavaScript代码，从而调用HTML页面中的函数。同样，HTML页面也可以通过`...
qml与c++混合编程例子
04-30
另一种混合编程的方式是通过QML上下文（`QQmlContext`）和QML引擎（`QQmlEngine`）来在QML与C++之间传递数据和调用函数。这包括： - **设置根对象属性**：在C++中，可以通过`QQmlEngine::rootContext()`获取根QML上...
Qt QML/C++实现计算器
12-02
通过这种方式，QML和C++之间的交互变得简单且高效。当用户在QML界面上点击按钮时，事件会被传递到C++后端进行计算，然后将结果返回到QML层显示。 在实际项目中，你还可以考虑以下扩展点： - 错误处理：添加错误...
qml和c++中的函数，互相调用的例子
07-08
总结一下，QML和C++之间的函数调用主要涉及以下几个步骤： 1. 在C++中创建一个继承自`QObject`的类，并使用`Q_OBJECT`和`Q_INVOKABLE`标记需要在QML中调用的函数。 2. 注册C++对象到QML引擎，并设置为QML上下文的...
qmlDesign1_C++数据qml_qtdesigner_c++界面切换_qml数据_qml_源码.zip
09-30
《QML设计与C++交互：构建动态用户界面》 QML（Qt Meta Language）是Qt框架中的一个强大工具，用于构建丰富的、响应式的用户界面。在“qmlDesign1_C++数据qml_qtdesigner_c++界面切换_qml数据_qml_源码.zip”这个...
nektechTextEditor:使用 QT、C++ 和 QML 的文本编辑器示例
06-16
通过阅读和分析源代码，可以学习到如何在 C++ 和 QML 之间进行通信，以及如何利用 QT 的信号和槽机制实现事件驱动编程。 总的来说，nektechTextEditor 是一个很好的实践案例，对于想要学习和提高在 QT、C++ 和 QML ...
C++扩展QML
weixin_42510813的博客
08-27 419
C++扩展QML QML执⾏在受限的空间中，QML作为⼀种语⾔提供的功能有时是被限制的。 通过C++写的本地函数可以扩展QML运⾏时的功能。应⽤程序可以充分利⽤ 基础平台的性能和⾃由度。 理解QML运行环境 当运行QML时，他会在一个由QtQml模块下的C++代码实现的运行环境中执行。它由一个负责执行QML的引擎，持有访问每个组件属性的上下文和实例化的QML元素组件构成。 #include <QtGui> #include <QtQml> int main(int argc, cha
QML与C++混合编程详解(QML与c++信号与槽的操作)
细雨纷飞~~~
05-05 2168
1、QML与C++为什么要混合编程 QML与C++为什么要混合编程，简单来说，就是使用QML高效便捷地构建UI，而C++则用来实现业务逻辑和复杂算法，下面介绍了两者间交互的方法与技巧。 2、QML访问C++概述 Qt集成了QML引擎和Qt元对象系统，使得QML很容易从C++中得到扩展，在一定的条件下，QML就可以访问QObject派生类的成员，例如信号、槽函数、枚举类型、属性、成员函数等。 ...
Qt Quick 之 QML 与 C++ 混合编程详解
热门推荐
安晓辉生涯——聚焦程序员的职业规划与成长
07-04 19万+
Qt Quick 技术的引入，使得你能够快速构建 UI ，具有动画、各种绚丽效果的 UI 都不在话下。但它不是万能的，也有很多局限性，原来 Qt 的一些技术，比如低阶的网络编程如 QTcpSocket ，多线程，又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等，在 QML 中要么不可用，要么用起来不方便，所以呢，很多时候我们是会基于这样的原则来混合使用 QML 和 C++： QML 构建界面， C++ 实现非界面的业务逻辑和复杂运算。
qml 如何与qt进行数据交互
07-02
Qt是一个跨平台的C++应用程序开发框架，而QML是Qt中的一种声明式语言，用于构建用户界面。QML可以与Qt进行数据交互，具体的方法如下。 首先，我们需要在Qt中定义C++类型的变量或者对象，并将其暴露给QML使用。这可以通过使用QObject的派生类来实现，将类对象注册到QML引擎中。 其次，在QML中，我们可以引用这些已经注册的C++对象或者变量，从而与之进行数据交互。可以使用信号和槽机制来实现数据的传递和处理。 比如，假设我们在Qt中定义了一个名为MyData的类，该类有一个属性message，我们可以将其暴露给QML使用： ```cpp class MyData : public QObject { Q_OBJECT Q_PROPERTY(QString message READ message WRITE setMessage NOTIFY messageChanged) public: QString message() const; void setMessage(const QString& msg); signals: void messageChanged(); }; ``` 然后，在Qt中，我们将这个类对象注册到QML引擎中： ```cpp qmlRegisterType<MyData>("com.example", 1, 0, "MyData"); ``` 接下来，我们可以在QML中使用这个已经注册的C++对象： ```qml import com.example 1.0 MyData { id: myObject message: "Hello World" } Text { text: myObject.message } ``` 这样，我们就可以在QML中使用myObject对象的属性message，并将其显示在Text组件上。当myObject对象的属性发生改变时，Text组件也会相应地更新。 另外，我们还可以在QML中发射C++对象的信号，然后在Qt中捕获这些信号，进行相应的处理。 总之，QML与Qt的数据交互主要通过在Qt中注册C++对象，并在QML中引用这些对象来实现。这样，我们可以方便地在QML中使用Qt提供的各种功能，并实现复杂的交互逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值