Dynamically load QML object from C++ after main QML

Vyuvaraj

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();

}

sierdzio

@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.

dheerendra

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.

Vyuvaraj

@dheerendra Can you share me an example or document link