c++中加载qml文件方式

  1. 方式一：
  2. QQmlApplicationEngine engine;
  3. engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
  5. 方式二：
  6. QQuickView view;
  7. view.setSource(QUrl(QStringLiteral("qrc:///main.qml")));

两者的不同之处在于：

  1. 启动Qt Quick APP模式： QQmlApplicationEngine搭配Window。QQuickView搭配Item。

  2. 使用QQuickView显示QML文档，对窗口的控制权（比如设置窗口标题、Icon、窗口的最小尺寸等）在C++代码；而使用QQmlApplicationEngine加载以Window为根对象的QML文档，QML文档则拥有窗口的完整控制权，可以直接设置标题、窗口尺寸等属性。

    交互

    通过加载引擎engine获取到 QQmlContext指针对象（qml上下文对象、全局对象），通过改对象方法设置属性对qml的属性进行设置。

    1. QQmlApplicationEngine engine;
    2.  QQmlContext* context = engine.rootContext();
    3.  QScreen* screen = QGuiApplication::primaryScreen();
    4.  QRect rect = screen->virtualGeometry();
    5.  context->setContextProperty("WINDOW_WIDTH", rect.width());
    7.  const QUrl url(QStringLiteral("qrc:/main.qml"));
    8. //    const QUrl url(QStringLiteral("qrc:/myPopup.qml"));
    9.  QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
    10.                   &app, [url](QObject *obj, const QUrl &objUrl) {
    11.      if (!obj && url == objUrl)
    12.          QCoreApplication::exit(-1);
    13.  }, Qt::QueuedConnection);
    14.  engine.load(url);
  1. Rectangle {
  2.     width:840
  3.     height: 460
  4.     property int testValue: 0    //改属性可外部修改
  5. }
  7. Rectangle {
  8.     width:840
  9.     height: 460
  10.     QtObject{
  11.         id: attr
  12.         property int testValue: 0        //改属性外部就不可访问了，相当于cpp private了， 
  13.     }
  16. Rectangle {
  17.     width:840
  18.     height: 460
  19.     property alias attr: attributes    //外部访问需要将id 使用别名开放给外部
  20.     QtObject{
  21.         id: attributes
  22.         property int testValue: 0
  23.     }
  25.     Component.onCompleted: console.log(attributes.testValue)    //内部访问需要通过id
  26. }

qml中对cpp属性进行访问：
创建cpp类

  1. #ifndef MYOBJECT_H
  2. #define MYOBJECT_H
  4. #include <QObject>
  5. #include <QtQml>
  7. class MyObject : public QObject
  8. {
  9.     Q_OBJECT
  10.     QML_ELEMENT //告知编译器改类对象qml回去访问操作
  11. public:
  12.     explicit MyObject(QObject *parent = nullptr);
  14.     static MyObject* getInstance();
  16.     int iValue() const;
  17.     void setIValue(int newIValue);
  19.     const QString &sString() const;
  20.     void setSString(const QString &newSString);
  22.     const QString &getSName() const;
  23.     void setSName(const QString &newSName);
  25.     int iAge() const;
  26.     void setIAge(int newIAge);
  28.     int getP_iHeight() const;
  29.     void setP_iHeight(int newP_iHeight);
  31. signals:
  32.     void iValueChanged();
  34.     void sStringChanged();
  36.     void sNameChanged();
  38.     void iAgeChanged();
  40.     void p_iHeightChanged();
  42. private:
  43.     int m_iValue;
  44.     QString m_sString;
  45.     QString sName;
  46.     int _iAge;
  47.     int p_iHeight;
  49.     //声明一个属性
  50. //    Q_PROPERTY(int iValue READ iValue WRITE setIValue NOTIFY iValueChanged)
  51. //    Q_PROPERTY(int iValue READ MEMBER m_iValue NOTIFY iValueChanged)  //错误操作
  52.     Q_PROPERTY(QString sString READ sString WRITE setSString NOTIFY sStringChanged)
  53.     Q_PROPERTY(QString sName READ getSName WRITE setSName NOTIFY sNameChanged)
  54.     Q_PROPERTY(int iAge READ iAge WRITE setIAge NOTIFY iAgeChanged)
  55.     Q_PROPERTY(int p_iHeight READ getP_iHeight WRITE setP_iHeight NOTIFY p_iHeightChanged)
  56. };
  58. #endif // MYOBJECT_H
  1. #include "myobject.h"
  3. MyObject::MyObject(QObject *parent)
  4.     : QObject{parent}
  5. {
  7. }
  9. MyObject *MyObject::getInstance()
  10. {
  11.     static MyObject* obj = new MyObject;
  12.     return obj;
  13. }
  15. int MyObject::iValue() const
  16. {
  17.     return m_iValue;
  18. }
  20. void MyObject::setIValue(int newIValue)
  21. {
  22.     if (m_iValue == newIValue)
  23.         return;
  24.     m_iValue = newIValue;
  25.     emit iValueChanged();
  26. }
  28. const QString &MyObject::sString() const
  29. {
  30.     return m_sString;
  31. }
  33. void MyObject::setSString(const QString &newSString)
  34. {
  35.     if (m_sString == newSString)
  36.         return;
  37.     m_sString = newSString;
  38.     emit sStringChanged();
  39. }
  41. const QString &MyObject::getSName() const
  42. {
  43.     return sName;
  44. }
  46. void MyObject::setSName(const QString &newSName)
  47. {
  48.     if (sName == newSName)
  49.         return;
  50.     sName = newSName;
  51.     emit sNameChanged();
  52. }
  54. int MyObject::iAge() const
  55. {
  56.     return _iAge;
  57. }
  59. void MyObject::setIAge(int newIAge)
  60. {
  61.     if (_iAge == newIAge)
  62.         return;
  63.     _iAge = newIAge;
  64.     emit iAgeChanged();
  65. }
  67. int MyObject::getP_iHeight() const
  68. {
  69.     return p_iHeight;
  70. }
  72. void MyObject::setP_iHeight(int newP_iHeight)
  73. {
  74.     if (p_iHeight == newP_iHeight)
  75.         return;
  76.     p_iHeight = newP_iHeight;
  77.     emit p_iHeightChanged();
  78. }

对cpp进行注册

  1. #include <QGuiApplication>
  2. #include <QQmlApplicationEngine>
  3. #include <QQuickView>
  4. #include <QQmlContext>
  5. #include <QScreen>
  6. #include <QRect>
  7. #include "myobject.h"
  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);
  16.     QQmlApplicationEngine engine;
  17.     QQmlContext* context = engine.rootContext();
  18.     QScreen* screen = QGuiApplication::primaryScreen();
  19.     QRect rect = screen->virtualGeometry();
  20.     //注册的上下文对象 它是作用于全局的
  21.     context->setContextProperty("windos_WIDTH", rect.width()/2);
  23.     //方式1
  24. //    MyObject obj;
  25. //    context->setContextProperty("MyObject", &obj);
  27. //    context->setContextProperty("MyObject", MyObject::getInstance());
  28.     //方式2
  29.     qmlRegisterType<MyObject>("MyObj", 1, 0, "MyObject"); //模板类型 模块名称 主版本号 次版本号 组件名称
  31.     const QUrl url(QStringLiteral("qrc:/main.qml"));
  32. //    const QUrl url(QStringLiteral("qrc:/myPopup.qml"));
  33.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
  34.                      &app, [url](QObject *obj, const QUrl &objUrl) {
  35.         if (!obj && url == objUrl)
  36.             QCoreApplication::exit(-1);
  37.     }, Qt::QueuedConnection);
  38.     engine.load(url);
  40. //    QQuickView view;
  41. //    view.setSource(QStringLiteral("qrc:/rectangle.qml"));
  43.     return app.exec();
  44. }

qml中进行使用

  1. Window {
  2.     property int windos_WIDTH: 200
  3.     width: windos_WIDTH  //会优先与内部属性windos_WIDTH绑定
  4.     height: 480
  5. //    property int value: width   //这里是将这两个属性绑定，value随着width动态改变而改变
  6.     property int value: myobj.iValue
  7.     visible: true
  8.     title: qsTr("Hello World")
  9.     id: root
  11.     MyObject{
  12.         id: myobj
  13.         iValue: 10
  14.         sString: "zhangshan"
  15. //        Component.onCompleted: {
  16. //            console.log("MyObject completed")
  17. //        }
  18.     }
  19. //    Component.completed: {
  20. //        value = width   //这里将width的当前值赋值给value，value不在与width存在动态绑定关系
  21. //    }
  23.     onWidthChanged: {
  24.         console.log("onWidthChanged: ", width, " value: ", value)
  25.     }
  26.     onValueChanged: {
  27.         console.log("onWidthChanged: ", width, " value: ", value)
  28.     }
  30.     Button{
  31.         onClicked: myobj.iValue = 20    //iValue值被修改时会发送iValueChanged信号 通知value这个值被改变，value的值也会随着改变
  32.     }
  33. }

qml中调用cpp方法：

  1. public:
  2. //添加宏 qml可访问，提起改对象已经注册过; 在private中声明会识别不到报错
  3. Q_INVOKABLE void func();    
  5. void MyObject::func()
  6. {
  7.     qDebug() << "func";
  8. }
  1. Button{
  3.         onClicked: {
  4.             myobj.func()
  5.             myobj.iValue = 20    //iValue值被修改时会发送iValueChanged信号 通知value这个值被改变，value的值也会随着
  6.         }
  7.     }

qml与cpp信号槽的连接：

  1. signal qmlSig(int i, string s)
  3.     Button{
  4.         onClicked: {
  5.             myobj.func()
  6.             qmlSig(12, "wangwu")
  7.         }
  8.     }
  9.     MyObject{
  10.         id: myobj
  11.     }
  13.     //qml端绑定cpp槽函数：
  14.     //方式1
  15. //    Connections{
  16. //        target: root
  17. //        function onQmlSig(i, s){
  18. //            myobj.cppSlot(i,s)
  19. //        }
  20. //    }
  21.     //方式2
  22.     Component.onCompleted: {
  23.         qmlSig.connect(myobj.cppSlot)
  24.     }
  25.     //方式3 在cpp加载qml文件的地方进行绑定
  26.     qmlRegisterType<MyObject>("MyObj", 1, 0, "MyObject"); //模板类型 模块名称 主版本号 次版本号 组件名称
  28.     const QUrl url(QStringLiteral("qrc:/main.qml"));
  29. //    const QUrl url(QStringLiteral("qrc:/myPopup.qml"));
  30.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
  31.                      &app, [url](QObject *obj, const QUrl &objUrl) {
  32.         if (!obj && url == objUrl)
  33.             QCoreApplication::exit(-1);
  34.     }, Qt::QueuedConnection);
  35.     engine.load(url);
  37.     //engine 加载完成后 load后
  38.     auto list = engine.rootObjects();
  40.     auto window = list.first();
  41.     QObject::connect(window, SIGNAL(qmlSig(int, QString)),
  42.                      MyObject::getInstance(), SLOT(cppSlot(int, QString)));
  44.     auto objName = list.first()->objectName();
  45.     auto objChildName = list.first()->findChild<QObject*>("mybutton");
  46.     qDebug() << objName << objChildName;

cpp信号触发qml槽函数

  1. function qmlSlot(i, s){//参数类型对应cpp都是QVariant类型
  2.         console.log("qmlSlot ", i , " ", s)
  3.     }
  5.     Button{
  6.         objectName: "mybutton"
  7.         onClicked: {
  8.             myobj.func()
  9. //            myobj.cppSig(23, "liuzheng")
  10.             qmlSig(12, "wangwu")
  11.         }
  12.     }
  13.     MyObject{
  14.         id: myobj
  15.     }
  16.     Connections{
  17.         target: myobj
  18.         function onCppSig(i, s){
  19.             root.qmlSlot(i,s)
  20.         }
  21.     }

使用注册时映射一个cpp对象直接在qml中通过使用组件的方式进行调用cpp中的方法

  1. //模板类型 模块名称 主版本号 次版本号 组件名称 自定义模块对象
  2.     qmlRegisterSingletonInstance("MyObj", 1, 0, "MyObject", MyObject::getInstance());
  1. Button{
  2.         objectName: "mybutton"
  3.         onClicked: {
  4. //            myobj.func()
  5. //            myobj.cppSig(23, "liuzheng")
  6.             MyObject.func()
  7.             qmlSig(12, "wangwu")
  8.         }
  9.     }
  10. //    MyObject{
  11. //        id: myobj
  12. //    }
  13.     Connections{
  14. //        target: myobj
  15.         target: MyObject
  16.         function onCppSig(i, s){
  17.             root.qmlSlot(i,s)
  18.         }
  19.     }
  1. QObject::connect(MyObject::getInstance(), SIGNAL(cppSig(int, QString)),
  2.                      window, SLOT(qmlSlot(int, QString)));