How to add element to Column layout with JavaScript

Question

I want to add objects to qml Column layout dynamically, but can't figure out how to do this.

So, for simple example, let's assume that we need to add some new object to column by pressing first rectangle. Two others just for some volume.

Here is some code:

import QtQuick 2.9
import QtQuick.Window 2.2

ApplicationWindow {
    width: 360
    height: 360
    visible: true
    id: root


    Item {
        id: itemRef
        width: 310; height: 170

        Column {
            id: columnRef
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            spacing: 5

            Rectangle { color: "lightblue"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "Press me" }
                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                var component = Qt.createComponent("Sprite.qml");
                                if (component.status === Component.Ready){
                                    sprite = component.createObject(columnRef);
                                }
                            }
                        }
            }
            Rectangle { color: "gold"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "1" } }
            Rectangle { color: "lightgreen"; radius: 10.0
                        width: 300; height: 50
                        Text { anchors.centerIn: parent
                               font.pointSize: 24; text: "2" } }
        }
    }
}

And Sprite.qml is just:

import QtQuick 2.9

Item {
    Rectangle { width: 300; height: 50; color: "red" }
}

I don't want to make it using listmodel and listview. Is there just simple way to create item from qml file and then add it to column?

Answer 1

You have a couple of issues in your code: You are using sprite as a variable while its not so defined. It must be declared as var in your java script.

Second, Your sprite.qml is creating an Item which is not expected as child inside your Column layout. So you only need to define a rectangle inside sprite.qml, correcting those issues will render new rectangle as expected

Bonus: if you want to render correctly while repeating the clicks, you need to watch the height of your Item container to make sure it can host newly created rectangles. so you can add to your script something like this: itemRef.height = itemRef.height + sprite.height

Correct code might look like:

...
onClicked: {
    var component;
    var sprite;
    component = Qt.createComponent("Sprite.qml");
    if (component.status === Component.Ready){
        sprite = component.createObject(columnRef);
        itemRef.height = itemRef.height + sprite.height
    }
}
...

and sprite.qml

import QtQuick 2.9
Rectangle { color: "red"; radius: 10.0
            width: 300; height: 50
            Text { anchors.centerIn: parent
                   font.pointSize: 24; text: "new" } }

Result: