How to move a cell in GridLayout - QML?

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
  }