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
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.