Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Using a *.QML file at runtime

    QML and Qt Quick
    2
    4
    1135
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • G
      gkavrecic last edited by

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

      1 Reply Last reply Reply Quote 0
      • L
        Leonardo last edited by

        Use the "Loader" component.

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

        1 Reply Last reply Reply Quote 0
        • G
          gkavrecic last edited by 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

          1 Reply Last reply Reply Quote 0
          • G
            gkavrecic last edited by

            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!

            1 Reply Last reply Reply Quote 0
            • First post
              Last post