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

Using a *.QML file at runtime



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





  • 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



  • 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!


Log in to reply