Using a *.QML file at runtime

gkavrecic

I'm trying to understand the possibilities of QtQuick/QML in Qt5.10.
Generally, I might say I've got the idea how it works.
I would like to understand if it is possible to include a component at runtime, just with its name.

First, I have a problem with a RedBox component which is not part of the project (e.g. end-user addition).

main.qml:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Rectangle {
    color: "green"
    Text { text: "TEST" }
    RedBox {}
}

RedBox.qml:

import QtQuick 2.0

Rectangle {
    radius: 8
    width: 64
    height: 64
    color: "red"
    border { color: "blue"; width: 5 }

    Text { id: text text: "BOX" }
}

As far as I came it seems that you have to include the QML at compile time.
Or am I wrong?

The file was in one of the QQmlEngine::importPathList()

Leonardo

Use the "Loader" component.

https://doc.qt.io/qt-5/qml-qtquick-loader.html

gkavrecic

I tought of this, but it makes everything complicated if you have several of such objects.
Imagine you want to define a screen with 30 buttons loaded trough Loader...
I would like that the new component is used like the builtin.

Reading several docs & sites I've got the impression that a file in the QML search path with the same name of the component shall be enough. Even without the qmldir file.

See this post: https://forum.qt.io/post/305028

gkavrecic

Just for the sake of others that might need an answer.
Below is a sample how to load and later set parameters to objects in external files.
Remember this is loaded on a GUI widget using QQuickView engine.

main.qml

import QtQuick 2.10
import QtQuick.Window 2.10

Rectangle {
    visible: true
    width: 640
    height: 480

    Row {
        Column {
            Rectangle {
                color: "red"
                width: 100
                height: 100

                MouseArea {
                    anchors.fill: parent
                    // set property of loaded object
                    onClicked: button2.item.color = "orange"
                }
            }
            Rectangle {
                color: "lime"
                width: 100
                height: 100

                MouseArea {
                    anchors.fill: parent
                    // set property of loaded object
                    onClicked: button2.item.color = "green"
                }
            }
        }
        Column {
            //BoxInFile { caption: "BB" } // ! does not load

            // direct loading
            Loader {
                id: button1
                source: "BoxInFile.qml"
            }

            // indirect loading with params
            Loader {
                id: button2
            }
            Component.onCompleted: {
                // load and set initial parameters
                button2.setSource("BoxInFile.qml",{
                                      caption: "Loaded2",
                                      color: "grey"
                                  });
            }
        }
    }
}

BoxInFile.qml:

import QtQuick 2.10

Rectangle {
    width: 100
    height: 100
    color: "lime"

    Text {
        text: "from\nFILE"
        anchors.centerIn: parent
    }
}

NOTE: this example does not check if the object has been really loaded!