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

于 2024-08-21 15:10:41 发布
阅读量541 收藏 9
点赞数 4
分类专栏： QT 学习笔记 文章标签： c++ 交互 qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35662333/article/details/141394219
版权

https://www.cnblogs.com/jzcn/p/17774676.html

一、属性绑定

这是最简单的方式，可以在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;
};

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

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

5.运行效果

四、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()
        }
    }
}
去往火星
关注
专栏目录
QML和C++的交互
sy84436446的博客
01-23 295
1.QML调用C++函数 // 先加载QML QQmlApplicationEngine *g_qmlEngine = g_qmlEngine = new QQmlApplicationEngine(this); QQmlComponent lv_component(g_qmlEngine, QUrl(QStringLiteral("qrc:/main.qml"))); QObject *g_rootObject = lv_component.create(); g_rootObject->set
qt之qml与C++数据交互
weixin_33868027的博客
03-16 8654
我是一名Android开发出生，在大学学的是javaweb方向的开发，不能说javaweb方向的东西都精通，但是至少应该能捡的起来。因为个人的爱好“喜欢看到一些看起来炫酷的东西”所以开始了漫长的接近四年的开发之旅。也是因为工作的原因，开始接触linux的应用层开发。 学习的心得：从android学习的过程中，我明白了一件事，懂得站在巨人的肩膀上。在查询资料的过程中也发现，纵然qml的起源比a...
QML与C++交互
热门推荐
龚建波
02-27 3万+
前言 文档如是说，QML旨在通过C ++代码轻松扩展。Qt QML模块中的类使QML对象能够从C ++加载和操作，QML引擎与Qt元对象系统集成的本质使得C ++功能可以直接从QML调用。这允许开发混合应用程序，这些应用程序是通过混合使用QML，JavaScript和C ++代码实现的。 QML is designed to be easily extensible through C++ c...
QML 与 C++ 交互
wanglei_11的博客
12-31 480
QML 与 C++ 交互
qml与C++的交互
qq_33200959的博客
07-11 585
简单说下我自己对qml与c++的交互的理解流程： 1.界面交互，很多新手可能会写qt界面或者qml界面，但想要把qml与c++结合起来就一脸蒙逼了。首先我提供个简单的方法实现qml和c++的界面交互,首先引入几个重要的头文件，当然在项目文件中需要加QT+= quickwidgets才能引用以下头文件 #include &lt;QQuickWidget&gt; #include &lt;QQu...
Qml与C++交互
SuperYu的博客
03-09 3142
Qml与C++交互 文档如是说，使用C ++代码中定义的功能可以轻松扩展QML。 由于QML引擎与Qt元对象系统的紧密集成，可以从QML代码访问由QObject派生的类适当公开的任何功能。 这使得C ++类的属性和方法可以直接从QML访问，通常很少或无需修改。 QML引擎能够通过元对象系统内省QObject实例。 这意味着， 任何QML代码都可以访问QObject派生类实例的以下成员： 属性（使用Q_PROPERTY注册的属性） 方法（需注册为public slots或是标记为Q_INVOKABLE）
Qml与C++通信交互
11-21
在Qt中，QML与C++的交互主要通过以下几种方式： 1. **QObject子类和Q_INVOKABLE**：在C++中，创建一个继承自QObject的类，并使用Q_OBJECT宏。然后，可以将需要在QML中调用的成员函数标记为Q_INVOKABLE。这样，这些...
C++与QML数据交互及界面切换技术解析
资源摘要信息: "本资源主要讲解了如何在使用C++和QML进行界面开发时实现界面切换，并介绍了C++与QML之间的数据通信机制。特别详细地描述了如何将C++的数据注册到QML中，并在QML界面中显示这些数据。这些知识点通常...
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页面也可以通过`...
c++ qml 数组_QML与C++数据绑定
weixin_29698317的博客
02-23 830
参考资料：参照 View-Model 模型，QML作为 View，C++中的对象作为 Model，实现业务逻辑和界面的分离。暴露单个C++类的属性通过这种方法，QML中可以直接访问注册到上下文中的C++类实例，并且是注册到QML的全局(具体是注册到一个 QQuickView 或者 engine)。以自定义一个 Name 类，类包括一个 data 属性为例。类定义需要暴露给QML访问的类需要有特殊的...
第一个QML小项目
SuperYu的博客
09-24 330
第一个QML小项目 目的：实现鼠标点击风车，让风车转动90度 程序入口：main.cpp #include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringLit
QT：QML与C++交互
最新发布
qq_48597462的博客
05-11 1271
在 Qt 中，QML 与 C++ 交互是非常重要的，因为它允许开发人员充分利用 QML 和 C++ 各自的优势，实现更加灵活和高效的应用程序开发。QML 是一种声明性的语言，用于构建用户界面，具有直观、简洁和易于理解的特点，适合用于描述界面的外观和交互逻辑。而 C++ 是一种强大的编程语言，可以进行复杂的计算和处理逻辑，适合用于实现底层功能和业务逻辑。1.性能优化：C++ 可以处理复杂的计算和逻辑，可以提高应用程序的性能。
【QML笔记】QML与C++实现数据交互
疯花正猫的博客
01-15 1763
在QML开发中，往往将QML用作UI开发，CPP用作业务处理，这样可以很方便地引入Model/View/Delegate)等框架以降低项目代码间的耦合度。因此，QML和C++之间的数据交互是必不可少的一部分。本文考虑到实际开发需要，介绍在qml侧调用c++接口、信号、属性的方式。
qml 和 c++类的数据交互
notfindjob的博客
05-10 295
QML和C++类的交互，QML数据实时写入PDF文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值