• C++与QML交互总结二

    目录

    1.CPP调用QML

    1.1 QMetaObject::invokeMethod调用

    1.2 CPP中的信号绑定qml中的槽

    2.QML调用CPP

    2.1 QML单实例注册

    2.2 将类对象注册到QML的上下文中

    2.3 QML信号调用CPP槽

    3.QML中注入一个cpp实例

    3.1qmlRegisterType

    3.2QML_ELEMENT

    4.附加属性: QML_ATTACHED

    以前写过一篇C++和QML交互的的文章（C++与QML交互总结_qml和c++交互_hsy12342611的博客-CSDN博客），很多网友都在看并提出了一些疑问，本篇结合网上的资料从另外一个角度再重新梳理一下C++与QML的交互。

    1.CPP调用QML

    1.1 QMetaObject::invokeMethod调用

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6.  
    7.  
    8. int main(int argc, char *argv[])
    9. {
    10. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    11.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    12. #endif
    13.     QGuiApplication app(argc, argv);
    14.  
    15.     QQmlApplicationEngine engine;
    16.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    17.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    18.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    19.         if (!obj && url == objUrl)
    20.             QCoreApplication::exit(-1);
    21.     }, Qt::QueuedConnection);
    22.     engine.load(url);
    23.  
    24.     //cpp调用qml指定对象的指定方法
    25.     auto rootObj = engine.rootObjects();
    26.     // rootObj.first()获取所有对象列表
    27.     auto label = rootObj.first()->findChild("qml_label");
    28.  
    29.     // 通过元对象调用
    30.     QVariant ret;
    31.     QMetaObject::invokeMethod(label, "getText",
    32.                               Q_RETURN_ARG(QVariant, ret),
    33.                               Q_ARG(QVariant, " hello"));
    34.  
    35.     qDebug() << ret.toString();
    36.  
    37.     return app.exec();
    38. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5.  
    6.  
    7. Window {
    8.     width: 640
    9.     height: 480
    10.     visible: true
    11.     title: qsTr("qml和cpp交互总结")
    12.  
    13.     Item {
    14.         id: item
    15.         anchors.fill: parent
    16.  
    17.         QtCtrl.Label {
    18.             objectName: "qml_label"
    19.             text: "QML Label"
    20.             font.pixelSize: 25
    21.  
    22.             function getText(data) {
    23.                 return text + data
    24.             }
    25.         }
    26.     }
    27.  
    28. }

    1.2 CPP中的信号绑定qml中的槽

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include "person.h"
    10.  
    11.  
    12. int main(int argc, char *argv[])
    13. {
    14. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    15.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    16. #endif
    17.     QGuiApplication app(argc, argv);
    18.  
    19.     Person person("张三", 18);
    20.  
    21.     QQmlApplicationEngine engine;
    22.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    23.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    24.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    25.         if (!obj && url == objUrl)
    26.             QCoreApplication::exit(-1);
    27.     }, Qt::QueuedConnection);
    28.  
    29.     //上下文: 将类对象注册到QML的上下文背景中
    30.     auto ctext = engine.rootContext();
    31.     ctext->setContextProperty("OtPerson", &person);
    32.  
    33.     // 先在上下文注入，再加载
    34.     engine.load(url);
    35.  
    36.     //cpp获取qml中的指定对象
    37.     auto rootObj = engine.rootObjects();
    38.     // rootObj.first()获取所有对象列表
    39.     auto button = rootObj.first()->findChild("qml_button");
    40.     // 使用QT4的方式绑定信号和槽： qml的信号，cpp的槽
    41.     QObject::connect(button, SIGNAL(clicked()), &person, SLOT(clickButton()));
    42.     QObject::connect(button, SIGNAL(coutNum(int)), &person, SLOT(clickCal(int)));
    43.     /*
    44.     // 使用QT5的方式绑定信号和槽不可行，此处button is nullptr
    45.     auto button = rootObj.first()->findChild("qml_button");
    46.     if (!button) {
    47.         qDebug() << "button is nullptr";
    48.     }
    49.     QObject::connect(button, &QAbstractButton::clicked, &person, &Person::clickButton);
    50.     */
    51.  
    52.  
    53.     return app.exec();
    54. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5. import QtQml 2.15
    6.  
    7.  
    8. Window {
    9.     width: 640
    10.     height: 480
    11.     visible: true
    12.     title: qsTr("qml和cpp交互总结")
    13.  
    14.     Item {
    15.         id: item
    16.         anchors.fill: parent
    17.  
    18.         QtCtrl.Button {
    19.             objectName: "qml_button"
    20.             text: "QML button"
    21.             font.pixelSize: 25
    22.             property int cal: 1
    23.             // qml中自定义信号
    24.             signal coutNum(int num)
    25.  
    26.             onClicked: {
    27.                 OtPerson.showInfo()
    28.                 if (0 == cal++ % 10) {
    29.                     coutNum(cal)
    30.                 }
    31.             }
    32.  
    33.             // cpp的信号绑定qml的槽
    34.             Connections {
    35.                 target: OtPerson
    36.                 function onQmlCall() {
    37.                     console.log("cpp call qml")
    38.                 }
    39.             }
    40.  
    41.             Connections {
    42.                 target: OtPerson
    43.                 function onQmlCall(data) {
    44.                     console.log("cpp call qml " + data)
    45.                 }
    46.             }
    47.         }
    48.     }
    49.  
    50. }

    2.QML调用CPP

    2.1 QML单实例注册

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include "person.h"
    7.  
    8.  
    9. int main(int argc, char *argv[])
    10. {
    11. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    12.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    13. #endif
    14.     QGuiApplication app(argc, argv);
    15.  
    16.     Person person("张三", 18);
    17.     // qml单实例注册
    18.     qmlRegisterSingletonInstance("PersonMudle", 1, 0, "MyPerson", &person);
    19.  
    20.     QQmlApplicationEngine engine;
    21.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    22.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    23.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    24.         if (!obj && url == objUrl)
    25.             QCoreApplication::exit(-1);
    26.     }, Qt::QueuedConnection);
    27.     engine.load(url);
    28.  
    29.     return app.exec();
    30. }
    31.

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5. import PersonMudle 1.0
    6.  
    7.  
    8. Window {
    9.     width: 640
    10.     height: 480
    11.     visible: true
    12.     title: qsTr("qml和cpp交互总结")
    13.  
    14.     Item {
    15.         id: item
    16.         anchors.fill: parent
    17.  
    18.         QtCtrl.Button {
    19.             objectName: "qml_button"
    20.             text: "QML button"
    21.             font.pixelSize: 25
    22.  
    23.             onClicked: {
    24.                 MyPerson.showInfo()
    25.             }
    26.         }
    27.     }
    28.  
    29. }

    2.2 将类对象注册到QML的上下文中

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include 
    7. #include "person.h"
    8.  
    9.  
    10. int main(int argc, char *argv[])
    11. {
    12. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    13.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    14. #endif
    15.     QGuiApplication app(argc, argv);
    16.  
    17.     Person person("张三", 18);
    18.  
    19.     QQmlApplicationEngine engine;
    20.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    21.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    22.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    23.         if (!obj && url == objUrl)
    24.             QCoreApplication::exit(-1);
    25.     }, Qt::QueuedConnection);
    26.     engine.load(url);
    27.  
    28.     //上下文: 将类对象注册到QML的上下文背景中
    29.     auto ctext = engine.rootContext();
    30.     ctext->setContextProperty("OtPerson", &person);
    31.  
    32.     return app.exec();
    33. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5.  
    6.  
    7. Window {
    8.     width: 640
    9.     height: 480
    10.     visible: true
    11.     title: qsTr("qml和cpp交互总结")
    12.  
    13.     Item {
    14.         id: item
    15.         anchors.fill: parent
    16.  
    17.         QtCtrl.Button {
    18.             objectName: "qml_button"
    19.             text: "QML button"
    20.             font.pixelSize: 25
    21.  
    22.             onClicked: {
    23.                 OtPerson.showInfo()
    24.             }
    25.         }
    26.     }
    27.  
    28. }

    2.3 QML信号调用CPP槽

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include "person.h"
    10.  
    11.  
    12. int main(int argc, char *argv[])
    13. {
    14. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    15.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    16. #endif
    17.     QGuiApplication app(argc, argv);
    18.  
    19.     Person person("张三", 18);
    20.  
    21.     QQmlApplicationEngine engine;
    22.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    23.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    24.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    25.         if (!obj && url == objUrl)
    26.             QCoreApplication::exit(-1);
    27.     }, Qt::QueuedConnection);
    28.     engine.load(url);
    29.  
    30.     //上下文: 将类对象注册到QML的上下文背景中
    31.     auto ctext = engine.rootContext();
    32.     ctext->setContextProperty("OtPerson", &person);
    33.  
    34.     //cpp获取qml中的指定对象
    35.     auto rootObj = engine.rootObjects();
    36.     // rootObj.first()获取所有对象列表
    37.     auto button = rootObj.first()->findChild("qml_button");
    38.     // 使用QT4的方式绑定信号和槽： qml的信号，cpp的槽
    39.     QObject::connect(button, SIGNAL(clicked()), &person, SLOT(clickButton()));
    40.     QObject::connect(button, SIGNAL(coutNum(int)), &person, SLOT(clickCal(int)));
    41.     /*
    42.     // 使用QT5的方式绑定信号和槽不可行，此处button is nullptr
    43.     auto button = rootObj.first()->findChild("qml_button");
    44.     if (!button) {
    45.         qDebug() << "button is nullptr";
    46.     }
    47.     QObject::connect(button, &QAbstractButton::clicked, &person, &Person::clieckButton);
    48.     */
    49.  
    50.  
    51.     return app.exec();
    52. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5.  
    6.  
    7. Window {
    8.     width: 640
    9.     height: 480
    10.     visible: true
    11.     title: qsTr("qml和cpp交互总结")
    12.  
    13.     Item {
    14.         id: item
    15.         anchors.fill: parent
    16.  
    17.         QtCtrl.Button {
    18.             objectName: "qml_button"
    19.             text: "QML button"
    20.             font.pixelSize: 25
    21.             property int cal: 1
    22.             // qml中自定义信号
    23.             signal coutNum(int num)
    24.  
    25.             onClicked: {
    26.                 OtPerson.showInfo()
    27.                 if (0 == cal++ % 10) {
    28.                     coutNum(cal)
    29.                 }
    30.             }
    31.         }
    32.     }
    33.  
    34. }

    3.QML中注入一个cpp实例

    3.1qmlRegisterType

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include "person.h"
    10. #include "tree.h"
    11.  
    12.  
    13. int main(int argc, char *argv[])
    14. {
    15. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    16.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    17. #endif
    18.     QGuiApplication app(argc, argv);
    19.  
    20.     // 注册一个C++类型到qml中
    21.     qmlRegisterType("TreeMudle", 1, 0, "MyTree");
    22.  
    23.     Person person("张三", 18);
    24.  
    25.     QQmlApplicationEngine engine;
    26.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    27.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    28.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    29.         if (!obj && url == objUrl)
    30.             QCoreApplication::exit(-1);
    31.     }, Qt::QueuedConnection);
    32.  
    33.     //上下文: 将类对象注册到QML的上下文背景中
    34.     auto ctext = engine.rootContext();
    35.     ctext->setContextProperty("OtPerson", &person);
    36.  
    37.     // 先在上下文注入，再加载
    38.     engine.load(url);
    39.  
    40.     //cpp获取qml中的指定对象
    41.     auto rootObj = engine.rootObjects();
    42.     // rootObj.first()获取所有对象列表
    43.     auto button = rootObj.first()->findChild("qml_button");
    44.     // 使用QT4的方式绑定信号和槽： qml的信号，cpp的槽
    45.     QObject::connect(button, SIGNAL(clicked()), &person, SLOT(clickButton()));
    46.     QObject::connect(button, SIGNAL(coutNum(int)), &person, SLOT(clickCal(int)));
    47.     /*
    48.     // 使用QT5的方式绑定信号和槽不可行，此处button is nullptr
    49.     auto button = rootObj.first()->findChild("qml_button");
    50.     if (!button) {
    51.         qDebug() << "button is nullptr";
    52.     }
    53.     QObject::connect(button, &QAbstractButton::clicked, &person, &Person::clickButton);
    54.     */
    55.  
    56.  
    57.     return app.exec();
    58. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5. import QtQml 2.15
    6. import TreeMudle 1.0
    7.  
    8.  
    9. Window {
    10.     width: 640
    11.     height: 480
    12.     visible: true
    13.     title: qsTr("qml和cpp交互总结")
    14.  
    15.     Item {
    16.         id: item
    17.         anchors.fill: parent
    18.  
    19.         QtCtrl.Button {
    20.             objectName: "qml_button"
    21.             text: tree.name + tree.age + tree.date//Qt.formatDate(tree.date, "yyyy-MM-dd hh:mm:ss")
    22.             font.pixelSize: 25
    23.             property int cal: 1
    24.             // qml中自定义信号
    25.             signal coutNum(int num)
    26.  
    27.             onClicked: {
    28.                 OtPerson.showInfo()
    29.                 if (0 == cal++ % 10) {
    30.                     coutNum(cal)
    31.                 }
    32.                 tree.name = "李四"
    33.             }
    34.  
    35.             // cpp的信号绑定qml的槽
    36.             Connections {
    37.                 target: OtPerson
    38.                 function onQmlCall() {
    39.                     console.log("cpp call qml")
    40.                 }
    41.             }
    42.  
    43.             Connections {
    44.                 target: OtPerson
    45.                 function onQmlCall(data) {
    46.                     console.log("cpp call qml " + data)
    47.                 }
    48.             }
    49.         }
    50.  
    51.         // 使用cpp注入的类型
    52.         MyTree {
    53.             id: tree
    54.             name: 'My_Tree'
    55.             age: 110
    56.             date: new Date()
    57.  
    58.             onNameChanged: {
    59.                 console.log("changed name: " + name)
    60.  
    61.             }
    62.         }
    63.     }
    64.  
    65. }

    3.2QML_ELEMENT

    .pro

    1. QT += quick
    2.  
    3. QT += core gui
    4. greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    5.  
    6. CONFIG += c++17 qmltypes
    7.  
    8. QML_IMPORT_NAME = TreeMudle
    9. QML_IMPORT_MAJOR_VERSION = 1
    10.  
    11. # You can make your code fail to compile if it uses deprecated APIs.
    12. # In order to do so, uncomment the following line.
    13. #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
    14.  
    15. SOURCES += \
    16.         main.cpp \
    17.         person.cpp \
    18.         tree.cpp
    19.  
    20. RESOURCES += qml.qrc
    21.  
    22. # Additional import path used to resolve QML modules in Qt Creator's code model
    23. QML_IMPORT_PATH =
    24.  
    25. # Additional import path used to resolve QML modules just for Qt Quick Designer
    26. QML_DESIGNER_IMPORT_PATH =
    27.  
    28. # Default rules for deployment.
    29. qnx: target.path = /tmp/$${TARGET}/bin
    30. else: unix:!android: target.path = /opt/$${TARGET}/bin
    31. !isEmpty(target.path): INSTALLS += target
    32.  
    33. HEADERS += \
    34.     person.h \
    35.     tree.h

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include "person.h"
    10. #include "tree.h"
    11.  
    12.  
    13. int main(int argc, char *argv[])
    14. {
    15. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    16.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    17. #endif
    18.     QGuiApplication app(argc, argv);
    19.  
    20.     Person person("张三", 18);
    21.  
    22.     QQmlApplicationEngine engine;
    23.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    24.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    25.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    26.         if (!obj && url == objUrl)
    27.             QCoreApplication::exit(-1);
    28.     }, Qt::QueuedConnection);
    29.  
    30.     //上下文: 将类对象注册到QML的上下文背景中
    31.     auto ctext = engine.rootContext();
    32.     ctext->setContextProperty("OtPerson", &person);
    33.  
    34.     // 先在上下文注入，再加载
    35.     engine.load(url);
    36.  
    37.     //cpp获取qml中的指定对象
    38.     auto rootObj = engine.rootObjects();
    39.     // rootObj.first()获取所有对象列表
    40.     auto button = rootObj.first()->findChild("qml_button");
    41.     // 使用QT4的方式绑定信号和槽： qml的信号，cpp的槽
    42.     QObject::connect(button, SIGNAL(clicked()), &person, SLOT(clickButton()));
    43.     QObject::connect(button, SIGNAL(coutNum(int)), &person, SLOT(clickCal(int)));
    44.     /*
    45.     // 使用QT5的方式绑定信号和槽不可行，此处button is nullptr
    46.     auto button = rootObj.first()->findChild("qml_button");
    47.     if (!button) {
    48.         qDebug() << "button is nullptr";
    49.     }
    50.     QObject::connect(button, &QAbstractButton::clicked, &person, &Person::clickButton);
    51.     */
    52.  
    53.  
    54.     return app.exec();
    55. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5. import QtQml 2.15
    6. import TreeMudle 1.0
    7.  
    8.  
    9. Window {
    10.     width: 640
    11.     height: 480
    12.     visible: true
    13.     title: qsTr("qml和cpp交互总结")
    14.  
    15.     Item {
    16.         id: item
    17.         anchors.fill: parent
    18.  
    19.         QtCtrl.Button {
    20.             objectName: "qml_button"
    21.             text: tree.name + tree.age + tree.date//Qt.formatDate(tree.date, "yyyy-MM-dd hh:mm:ss")
    22.             font.pixelSize: 25
    23.             property int cal: 1
    24.             // qml中自定义信号
    25.             signal coutNum(int num)
    26.  
    27.             onClicked: {
    28.                 OtPerson.showInfo()
    29.                 if (0 == cal++ % 10) {
    30.                     coutNum(cal)
    31.                 }
    32.                 tree.name = "李四"
    33.             }
    34.  
    35.             // cpp的信号绑定qml的槽
    36.             Connections {
    37.                 target: OtPerson
    38.                 function onQmlCall() {
    39.                     console.log("cpp call qml")
    40.                 }
    41.             }
    42.  
    43.             Connections {
    44.                 target: OtPerson
    45.                 function onQmlCall(data) {
    46.                     console.log("cpp call qml " + data)
    47.                 }
    48.             }
    49.         }
    50.  
    51.         // 使用cpp注入的类型
    52.         Tree {
    53.             id: tree
    54.             name: 'My_Tree'
    55.             age: 110
    56.             date: new Date()
    57.  
    58.             onNameChanged: {
    59.                 console.log("changed name: " + name)
    60.  
    61.             }
    62.         }
    63.     }
    64.  
    65. }

    person.h

    1. #ifndef PERSON_H
    2. #define PERSON_H
    3.  
    4. #include 
    5. #include 
    6. #include "tree.h"
    7.  
    8. class Person : public QObject
    9. {
    10.     Q_OBJECT
    11.     //类的附加属性
    12.     QML_ATTACHED(Tree)
    13.  
    14. public:
    15.     explicit Person(QObject *parent = nullptr);
    16.     Person(QString name, int age);
    17.     // 想要让QML调用函数，函数要加上宏Q_INVOKABLE
    18.     Q_INVOKABLE void showInfo() const noexcept;
    19.  
    20. public slots:
    21.     void clickButton() const noexcept;
    22.     void clickCal(int data) const noexcept;
    23.  
    24. signals:
    25.     void qmlCall() const;
    26.     // cpp给qml传参数不是所有类型都可以，一般就字符串，json和基本类型可以
    27.     void qmlCall(QString) const;
    28.  
    29. private:
    30.     QString _name;
    31.     int _age;
    32.  
    33. };
    34.  
    35. #endif // PERSON_H

    person.cpp

    1. #include "person.h"
    2. #include 
    3.  
    4. Person::Person(QObject *parent)
    5.     : QObject{parent}
    6. {
    7.  
    8. }
    9.  
    10. Person::Person(QString name, int age) {
    11.     _name = name;
    12.     _age = age;
    13. }
    14.  
    15. void Person::showInfo() const noexcept {
    16.     qDebug() << "name: " << _name << ", age: "<< _age;
    17.  
    18.     // cpp发送信号调用qml中的槽
    19.     emit qmlCall();
    20.     emit qmlCall("王五");
    21. }
    22.  
    23. void Person::clickButton() const noexcept {
    24.     qDebug() << __FUNCTION__ << " in qml: click button";
    25. }
    26.  
    27. void Person::clickCal(int data) const noexcept {
    28.     qDebug() << __FUNCTION__ << "  " << data;
    29. }

    tree.h

    1. #ifndef TREE_H
    2. #define TREE_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7.  
    8. //使用QML_ELEMENT后，就会产生元数据类型：描述数据的数据
    9.  
    10. class Tree : public QObject
    11. {
    12.     Q_OBJECT
    13.     // qml中使用cpp类的属性
    14.     Q_PROPERTY(QString name READ getName WRITE setName NOTIFY nameChanged)
    15.     Q_PROPERTY(int age READ getAge WRITE setAge NOTIFY ageChanged)
    16.     Q_PROPERTY(QDate date READ getDate WRITE setDate NOTIFY dateChanged)
    17.  
    18.     QML_ELEMENT
    19.  
    20. public:
    21.     explicit Tree(QObject *parent = nullptr);
    22.     Tree(QString nme, qint32 age, QDate date);
    23.  
    24.     void setName(QString name) noexcept;
    25.     void setAge(qint32 age) noexcept;
    26.     void setDate(QDate date) noexcept;
    27.  
    28.     QString getName() const noexcept;
    29.     qint32 getAge() const noexcept;
    30.     QDate getDate() const noexcept;
    31.  
    32. signals:
    33.     void nameChanged(QString);
    34.     void ageChanged();
    35.     void dateChanged();
    36.  
    37. private:
    38.     QString _name;
    39.     qint32 _age;
    40.     QDate _date;
    41. };
    42.  
    43. #endif // TREE_H

    tree.cpp

    1. #include "tree.h"
    2.  
    3. Tree::Tree(QObject *parent)
    4.     : QObject{parent}
    5. {
    6.  
    7. }
    8.  
    9. Tree::Tree(QString name, qint32 age, QDate date) {
    10.     _name = name;
    11.     _age = age;
    12.     _date = date;
    13. }
    14.  
    15. void Tree::setName(QString name) noexcept {
    16.     _name = name;
    17.     emit nameChanged(name);
    18. }
    19.  
    20. void Tree::setAge(qint32 age) noexcept {
    21.     _age = age;
    22.     emit ageChanged();
    23. }
    24.  
    25. void Tree::setDate(QDate date) noexcept {
    26.     _date = date;
    27.     emit dateChanged();
    28. }
    29.  
    30. QString Tree::getName() const noexcept {
    31.     return _name;
    32. }
    33.  
    34. qint32 Tree::getAge() const noexcept {
    35.     return _age;
    36. }
    37.  
    38. QDate Tree::getDate() const noexcept {
    39.     return _date;
    40. }
    41.

    4.附加属性: QML_ATTACHED

    使用附加属性：本质上会创建一个附加属性对象

    效果如下：

    tree.h

    1. #ifndef TREE_H
    2. #define TREE_H
    3.  
    4. #include 
    5. #include 
    6. #include 
    7.  
    8. //使用QML_ELEMENT后，就会产生元数据类型：描述数据的数据
    9.  
    10. class Tree : public QObject
    11. {
    12.     Q_OBJECT
    13.     // qml中使用cpp类的属性
    14.     Q_PROPERTY(QString name READ getName WRITE setName NOTIFY nameChanged)
    15.     Q_PROPERTY(int age READ getAge WRITE setAge NOTIFY ageChanged)
    16.     Q_PROPERTY(QDate date READ getDate WRITE setDate NOTIFY dateChanged)
    17.  
    18.     QML_ANONYMOUS
    19.  
    20. public:
    21.     explicit Tree(QObject *parent = nullptr);
    22.     Tree(QString nme, qint32 age, QDate date);
    23.  
    24.     void setName(QString name) noexcept;
    25.     void setAge(qint32 age) noexcept;
    26.     void setDate(QDate date) noexcept;
    27.  
    28.     QString getName() const noexcept;
    29.     qint32 getAge() const noexcept;
    30.     QDate getDate() const noexcept;
    31.  
    32. signals:
    33.     void nameChanged(QString);
    34.     void ageChanged();
    35.     void dateChanged();
    36.  
    37. private:
    38.     QString _name;
    39.     qint32 _age;
    40.     QDate _date;
    41. };
    42.  
    43. #endif // TREE_H

    tree.cpp

    1. #include "tree.h"
    2.  
    3. Tree::Tree(QObject *parent)
    4.     : QObject{parent}
    5. {
    6.  
    7. }
    8.  
    9. Tree::Tree(QString name, qint32 age, QDate date) {
    10.     _name = name;
    11.     _age = age;
    12.     _date = date;
    13. }
    14.  
    15. void Tree::setName(QString name) noexcept {
    16.     _name = name;
    17.     emit nameChanged(name);
    18. }
    19.  
    20. void Tree::setAge(qint32 age) noexcept {
    21.     _age = age;
    22.     emit ageChanged();
    23. }
    24.  
    25. void Tree::setDate(QDate date) noexcept {
    26.     _date = date;
    27.     emit dateChanged();
    28. }
    29.  
    30. QString Tree::getName() const noexcept {
    31.     return _name;
    32. }
    33.  
    34. qint32 Tree::getAge() const noexcept {
    35.     return _age;
    36. }
    37.  
    38. QDate Tree::getDate() const noexcept {
    39.     return _date;
    40. }
    41.

    person.h

    1. #ifndef PERSON_H
    2. #define PERSON_H
    3.  
    4. #include 
    5. #include 
    6. #include "tree.h"
    7.  
    8. class Person : public QObject
    9. {
    10.     Q_OBJECT
    11.     //类的附加属性，将Tree中的属性附加到Person类中
    12.     QML_ATTACHED(Tree)
    13.     QML_ELEMENT
    14.  
    15. public:
    16.     explicit Person(QObject *parent = nullptr);
    17.     Person(QString name, int age);
    18.     // 想要让QML调用函数，函数要加上宏Q_INVOKABLE
    19.     Q_INVOKABLE void showInfo() const noexcept;
    20.  
    21. public slots:
    22.     void clickButton() const noexcept;
    23.     void clickCal(int data) const noexcept;
    24.  
    25.     static Tree* qmlAttachedProperties(QObject*);
    26.  
    27. signals:
    28.     void qmlCall() const;
    29.     // cpp给qml传参数不是所有类型都可以，一般就字符串，json和基本类型可以
    30.     void qmlCall(QString) const;
    31.  
    32. private:
    33.     QString _name;
    34.     int _age;
    35.  
    36. };
    37.  
    38. #endif // PERSON_H

    person.cpp

    1. #include "person.h"
    2. #include 
    3.  
    4. Person::Person(QObject *parent)
    5.     : QObject{parent}
    6. {
    7.  
    8. }
    9.  
    10. Person::Person(QString name, int age) {
    11.     _name = name;
    12.     _age = age;
    13. }
    14.  
    15. void Person::showInfo() const noexcept {
    16.     qDebug() << "name: " << _name << ", age: "<< _age;
    17.  
    18.     // cpp发送信号调用qml中的槽
    19.     emit qmlCall();
    20.     emit qmlCall("王五");
    21. }
    22.  
    23. void Person::clickButton() const noexcept {
    24.     qDebug() << __FUNCTION__ << " in qml: click button";
    25. }
    26.  
    27. void Person::clickCal(int data) const noexcept {
    28.     qDebug() << __FUNCTION__ << "  " << data;
    29. }
    30.  
    31. Tree* Person::qmlAttachedProperties(QObject* obj) {
    32.     qDebug() << __FUNCTION__ << obj;
    33.     return new Tree(obj);
    34. }

    main.cpp

    1. #include 
    2. #include 
    3. // 元对象头文件
    4. #include 
    5. #include 
    6. #include 
    7. #include 
    8. #include 
    9. #include "person.h"
    10. #include "tree.h"
    11.  
    12.  
    13. int main(int argc, char *argv[])
    14. {
    15. #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    16.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    17. #endif
    18.     QGuiApplication app(argc, argv);
    19.  
    20.     Person person("张三", 18);
    21.  
    22.     QQmlApplicationEngine engine;
    23.     const QUrl url(QStringLiteral("qrc:/main.qml"));
    24.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    25.                      &app, [url](QObject *obj, const QUrl &objUrl) {
    26.         if (!obj && url == objUrl)
    27.             QCoreApplication::exit(-1);
    28.     }, Qt::QueuedConnection);
    29.  
    30.     //上下文: 将类对象注册到QML的上下文背景中
    31.     auto ctext = engine.rootContext();
    32.     ctext->setContextProperty("OtPerson", &person);
    33.  
    34.     // 先在上下文注入，再加载
    35.     engine.load(url);
    36.  
    37.     //cpp获取qml中的指定对象
    38.     auto rootObj = engine.rootObjects();
    39.     // rootObj.first()获取所有对象列表
    40.     auto button = rootObj.first()->findChild("qml_button");
    41.     // 使用QT4的方式绑定信号和槽： qml的信号，cpp的槽
    42.     QObject::connect(button, SIGNAL(clicked()), &person, SLOT(clickButton()));
    43.     QObject::connect(button, SIGNAL(coutNum(int)), &person, SLOT(clickCal(int)));
    44.     /*
    45.     // 使用QT5的方式绑定信号和槽不可行，此处button is nullptr
    46.     auto button = rootObj.first()->findChild("qml_button");
    47.     if (!button) {
    48.         qDebug() << "button is nullptr";
    49.     }
    50.     QObject::connect(button, &QAbstractButton::clicked, &person, &Person::clickButton);
    51.     */
    52.  
    53.  
    54.     return app.exec();
    55. }

    main.qml

    1. import QtQuick 2.15
    2. import QtQuick.Window 2.15
    3. import QtQuick.Controls 2.15 as QtCtrl
    4. import QtQuick.Layouts 1.0
    5. import QtQml 2.15
    6. import PersonMudle 1.0
    7.  
    8.  
    9. Window {
    10.     width: 640
    11.     height: 480
    12.     visible: true
    13.     title: qsTr("qml和cpp交互总结")
    14.  
    15.     Item {
    16.         id: item
    17.         anchors.fill: parent
    18.  
    19.         QtCtrl.Button {
    20.             objectName: "qml_button"
    21.             text: Person.name + Person.age + Person.date
    22.             font.pixelSize: 25
    23.             property int cal: 1
    24.             // qml中自定义信号
    25.             signal coutNum(int num)
    26.  
    27.             onClicked: {
    28.                 OtPerson.showInfo()
    29.                 if (0 == cal++ % 10) {
    30.                     coutNum(cal)
    31.                 }
    32.                 console.log(Person.name + " " + Person.age + " " + Person.date)
    33.                 console.log(this)
    34.             }
    35.  
    36.             // cpp的信号绑定qml的槽
    37.             Connections {
    38.                 target: OtPerson
    39.                 function onQmlCall() {
    40.                     console.log("cpp call qml")
    41.                 }
    42.             }
    43.  
    44.             Connections {
    45.                 target: OtPerson
    46.                 function onQmlCall(data) {
    47.                     console.log("cpp call qml " + data)
    48.                 }
    49.             }
    50.  
    51.             // 使用附加属性：本质上会创建一个附加属性对象
    52.             Person.name: "赵六"
    53.             Person.age: 25
    54.             Person.date: new Date()
    55.         }
    56.     }
    57.  
    58. }

    .pro

    1. QT += quick
    2.  
    3. QT += core gui
    4. greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
    5.  
    6. CONFIG += c++17 qmltypes
    7.  
    8. QML_IMPORT_NAME = PersonMudle
    9. QML_IMPORT_MAJOR_VERSION = 1
    10.  
    11. # You can make your code fail to compile if it uses deprecated APIs.
    12. # In order to do so, uncomment the following line.
    13. #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
    14.  
    15. SOURCES += \
    16.         main.cpp \
    17.         person.cpp \
    18.         tree.cpp
    19.  
    20. RESOURCES += qml.qrc
    21.  
    22. # Additional import path used to resolve QML modules in Qt Creator's code model
    23. QML_IMPORT_PATH =
    24.  
    25. # Additional import path used to resolve QML modules just for Qt Quick Designer
    26. QML_DESIGNER_IMPORT_PATH =
    27.  
    28. # Default rules for deployment.
    29. qnx: target.path = /tmp/$${TARGET}/bin
    30. else: unix:!android: target.path = /opt/$${TARGET}/bin
    31. !isEmpty(target.path): INSTALLS += target
    32.  
    33. HEADERS += \
    34.     person.h \
    35.     tree.h

  • 相关阅读:
    Spring面试题14：Spring中什么是Spring Beans? 包含哪些？Spring容器提供几种方式配置元数据？Spring中怎样定义类的作用域?
    JavaScrip笔记（1）
    【2022 MS MARCO】【阿里】HLATR：基于混合列表感知Transformer重排的多阶段文本检索增强 ( .feat PRM：个性化的推荐重排)
    数据库系统及应用复习——第二章关系数据库
    Redis三种模式——主从复制，哨兵模式，集群
    《梦醒蝶飞：释放Excel函数与公式的力量》1.1.8认识 excel后台视图
    Java核心编程(18)
    Java_FileIO流
    [软件工具][原创]yolov7快速训练助手使用教程傻瓜式训练不需要写代码配置参数
    代码随想录刷题】Day17 二叉树04
  • 原文地址：https://blog.csdn.net/hsy12342611/article/details/133309866