How to move a cell in GridLayout - QML? - qt

Question

Considering the documentation of GridLayout, here is what I have tried:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window
{
visible: true
MainForm
{
GridLayout {
id: gridLayout
columns: 3
height: 100
width: 100
property int oneRow: 0
property int oneCol: 0
Rectangle { id: one; Layout.row :gridLayout.oneRow; Layout.column: gridLayout.oneCol;
height: 50; width: 50; color: "brown"}
Rectangle { height: 50; width: 50; color: "red" }
Rectangle { height: 50; width: 50; color: "blue"}
Rectangle { height: 50; width: 50; color: "green"}
Rectangle { height: 50; width: 50; color: "yellow"}
}
Component.onCompleted:
{
gridLayout.oneRow = 2
gridLayout.oneCol = 2
}
}
}
If I comment out this code from Component.onCompleted,
gridLayout.oneRow = 2
gridLayout.oneCol = 2
I get:
Whereas I want that brown square to "move to" the second row's last column.
So, I wrote:
gridLayout.oneRow = 1
gridLayout.oneCol = 2
in Component.onCompleted.
but then, I got the following:
which is NOT what I wanted.
Please help.

Answer 1

If you wish to change the cell number of some item in the GridLayout, then you need to assign the initial row number and column number to all the elements _yourself_, and then change the position of the desired item dynamically as shown below:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
Window
{
visible: true
MainForm
{
GridLayout {
id: gridLayout
height: 100
width: 100
property int oneRow: 0
property int oneCol: 0
Rectangle { id: one;
Layout.row :gridLayout.oneRow; Layout.column: gridLayout.oneCol;
height: 50; width: 50; color: "brown"}
property int twoRow: 0
property int twoCol: 1
Rectangle { id: two;
Layout.row :gridLayout.twoRow; Layout.column: gridLayout.twoCol;
height: 50; width: 50; color: "red" }
property int threeRow: 0
property int threeCol: 2
Rectangle { id: three;
Layout.row :gridLayout.threeRow; Layout.column: gridLayout.threeCol;
height: 50; width: 50; color: "blue"}
property int fourRow: 1
property int fourCol: 0
Rectangle { id: four;
Layout.row :gridLayout.fourRow; Layout.column: gridLayout.fourCol;
height: 50; width: 50; color: "green"}
property int fiveRow: 1
property int fiveCol: 1
Rectangle { id: five;
Layout.row :gridLayout.fiveRow; Layout.column: gridLayout.fiveCol;
height: 50; width: 50; color: "yellow"}
}
Component.onCompleted:
{
gridLayout.oneRow = 1
gridLayout.oneCol = 2
}
}
}
Now, as you can see the following code in Component.onCompleted moves the brown rectangle to the 2nd row's 3rd column.
Component.onCompleted:
{
gridLayout.oneRow = 1
gridLayout.oneCol = 2
}