Error: QGridLayoutEngine::addItem: Cell (1, 0) already taken - qt

Question

I am getting console message for below shown code using GridLayout:
Rectangle{
id: topRect
color: "transparent"
border {
width: 1
color: "gray"
}
height: parent.height
width: parent.width
Flickable {
id: flickableArea
clip: true
anchors.fill: parent
contentHeight: gridContainer.height
contentWidth: gridContainer.width
boundsBehavior: Flickable.DragAndOvershootBounds
flickableDirection: Flickable.VerticalFlick
GridLayout{
id: gridContainer
rows: 10
columns: 3
width: topRect.width
columnSpacing: 0
rowSpacing: 0
Repeater{
model: 10*3
Rectangle{
width: 415
height: 110
border.color: "blue"
color: "transparent"
}
}
Rectangle {
id: rect1
width: 138
height: 110
Layout.row: 1
Layout.column: 0
color: "red"
}
Rectangle {
id: rect2
width: 138
height: 110
Layout.row: 2
Layout.column: 0
color: "blue"
}
}
}
Without repeater i am not getting this kind of console message but with repeater i am getting it. Repeater i need and that is the requirement.
Why i am getting warning message?
QGridLayoutEngine::addItem: Cell (1, 0) already taken
QGridLayoutEngine::addItem: Cell (2, 0) already taken
Is there any way to fix it or stop reflecting in console?

Answer 1

The problem is that the Repeater creates the 30 items that occupy all the cells but then you try to replace those cells and it makes GridLayout launch that warning. One possible solution is to create the items using Component.createObject to set it as a child of the items that meet the condition based on the row and column.
Rectangle{
id: topRect
color: "transparent"
border {
width: 1
color: "gray"
}
height: parent.height
width: parent.width
Component{
id: rectangleProvider
Rectangle{
width: 138
height: 110
}
}
function createRectangle(row, column, item){
var color;
if(row == 1 && column == 0){
color = "red"
}
else if(row == 2 && column == 0){
color = "blue"
}
if(color !== undefined){
var it = rectangleProvider.createObject(item, {"color": color})
}
}
Flickable {
id: flickableArea
clip: true
anchors.fill: parent
contentHeight: gridContainer.height
contentWidth: gridContainer.width
boundsBehavior: Flickable.DragAndOvershootBounds
flickableDirection: Flickable.VerticalFlick
GridLayout{
id: gridContainer
rows: 10
columns: 3
width: topRect.width
columnSpacing: 0
rowSpacing: 0
Repeater{
model: 10*3
Rectangle{
id: item
width: 415
height: 110
border.color: "blue"
color: "transparent"
Component.onCompleted: {
var row = Math.floor(index/gridContainer.columns)
var column = index - gridContainer.columns*row
topRect.createRectangle(row, column, item)
}
}
}
}
}
}