Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Dynamically load QML object from C++ after main QML



  • I'm new to Qt. I'm using Qt Creator Version : 4.10.1, Based on Qt 5.13.1

    I need to instantiate a QML object dynamically from C++. All the examples shown are basically deals with only one qml, which is nothing but the main QML.
    But My use case is little different. I have a main.qml which design the basic screen layout, which contains two "item" (for example leftElement and rightElement.
    From each one of the element, a c++ object is instantiated. The c++ object will have to read a XML file and based on the configuration available on the XML, it has to create a QML object which should be shown on the respective leftElement and rightElement place holder.

    The below code actually created three separate windows. I followed the principles mentioned under https://doc.qt.io/qt-5/qtqml-cppintegration-interactqmlfromcpp.html

    main.cpp

    #include "leftlayoutdesign.h"
    #include "rightlayoutdesign.h"
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
    
        qmlRegisterType<LeftLayoutDesign>("io.qt.LeftLayoutDesign",1,0,"LeftLayoutDesign");
        qmlRegisterType<RightLayoutDesign>("io.qt.RightLayoutDesign",1,0,"RightLayoutDesign");
    
        const QUrl url(QStringLiteral("qrc:/main.qml"));
        QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                         &app, [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);
        engine.load(url);
    
        return app.exec();
    }
    

    main.qml:

    
    import QtQuick 2.12
    import QtQuick.Window 2.12
    import io.qt.LeftLayoutDesign 1.0
    import io.qt.RightLayoutDesign 1.0
    
    Window {
        visible: true
        width:  Screen.width * 0.75
        height: Screen.height * 0.85
        title: qsTr("Demo-2")
            
        Item {
            id: leftElement
            LeftLayoutDesign{
                
            }
        }
        
        Item {
            id: rightElement
            RightLayoutDesign{
                
            }
        }    
    }
    

    leftlayoutdesign.cpp

    #include <QQuickView>
    
    LeftLayoutDesign::LeftLayoutDesign(QObject *parent) : QObject(parent)
    {
        qDebug() << "Left Layout Design Called";
    
       /* --- Snippet --
        * Read XML file 
        * If configuration is to create Button */
        QQuickView *view = new QQuickView;
        if(xmlConfig == placeButton)
            view->setSource(QUrl(QStringLiteral("qrc:/MyButton.qml")));
        else
            view->setSource(QUrl(QStringLiteral("qrc:/MyCircle.qml")));
        view->show();
    
    }
    

    rightlayoutdesign.cpp

    #include <QQuickView>
    
    RightLayoutDesign::RightLayoutDesign(QObject *parent) : QObject(parent)
    {
        qDebug() << "Right Layout Design Called";
    
       /* --- Snippet --
        * Read XML file 
        * If configuration is to load GIF File */
        QQuickView *view = new QQuickView;
        if(xmlConfig == showGif)
            view->setSource(QUrl(QStringLiteral("qrc:/MyGIFFileLoader.qml")));
        else
            view->setSource(QUrl(QStringLiteral("qrc:/MyPngFileLoader.qml")));
        view->show();
    
    }
    

  • Moderators

    @Vyuvaraj said in Dynamically load QML object from C++ after main QML:

    QQuickView *view = new QQuickView;

    You are creating a new QML view, so it will show up as new window and it will be completely separate from the rest of your app.

    To load a QML file dynamically within your existing QML project, use Loader element. You can prepare the QML file in C++ like you do, then point the Loader to that file using root context property or signals & slots, or some custom control object.


  • Qt Champions 2017

    Better to send the signal from C++ side & create the QML objects using Loader at QML side. Indeed if you want to create the QML object in C++, just refer QQmlComponent in documentation. It has good example on how to create the object in C++ & use it.



  • @dheerendra Can you share me an example or document link


Log in to reply