Copying Rectangles Automatically in Qml - qml

Question

Is it possible to make a certain amount of copies of a rectangle maybe by using a for loop or by any other way with the ability of changing each rectangle attributes like x,y,width etc.. by using QML
I have tried the following :
var x = 0
var t = 80
var z = 125
var Rectangle = []
if(rs.rows.length > 0){
x = 2
for(var i = 0; i < rs.rows.length; i++){
Rectangle[i] = rectangle18
Rectangle[i].x = t
Rectangle[i].y = z
Rectangle[i].visible = true
t = t - 40
z = z - 7
}
}
But unfortunately it's not working with me, is there a way of making this working

Answer 1

It's not quite that simple. You need to use Qt.createComponent and that object's createObject() call to achieve what you want. It's not just a matter of creating the rectangle and then copying it, you need to load each new copy separately from a qml file.
Something like:
var rects = []
var creator = Qt.createComponent("myRect.qml")
for (var i = 0; i < 10; i++) {
rects[i] = creator.createObject(PARENT)
rects[i].x = ...
}
Obviously extrapolating it to what you need. Note the reference to PARENT, which is the object that should end up containing the rectangle, which is often a container like a Grid or something.

Answer 2

If you don't want to use the Qt.CreateComponent method you can also consider using a Repeater component with a ListModel containing the info for each Rectangle. Here is an example placing 4 Rectangle in the scene:
ListModel {
id: modelRects
ListElement { _x: 0; _y:0 ; _width: 10; _height: 10; _color: "red" }
ListElement { _x: 100; _y:0 ; _width: 20; _height: 20; _color: "blue" }
ListElement { _x: 0; _y:100 ; _width: 30; _height: 30; _color: "yellow" }
ListElement { _x: 100; _y:100 ; _width: 40; _height: 40; _color: "green" }
}
Repeater {
model: modelRects
delegate: Rectangle {
width: _width
height: _height
x: _x
y: _y
color: _color
}
}
If you don't want to create the ListModel you can also base your calculations on the index of the element. Here is an example growing the Rectangle based on the index:
Repeater {
model: 5
delegate: Rectangle {
// Index starts at 0 so you want a width higher than 0 on first element
width: 10 * (index + 1)
height: 10 * (index + 1)
x: 50 * index
y: 50 * index
color: "red"
}
}