Gridview / Grid - How to implement the following with a model

[Nagarjun]

Hi all,

I need to implement the following in qml. I am new to QML and qt.

As shown in the image, The alternative rows should be in a different layout (left to right / right to left).
I tried implementing this with Gridview. But if i change the layout direction of one row its changing the whole Gridview's layout for all the rows. So how to implement this image in QML ?

Is there any way to implement in Gridview or does QML have some container to do this ?
And also I need to show the arrows in between those grids. The final output should look same as the image.
Kindly help me here.

Thanks.

[ODБOï]

@Nagarjun hi

can you explain a bit more what you want to implement?
you can make similar layout like this but by default it is not in the order you want

 GridLayout{
        anchors.fill: parent
        columns: 6
        Repeater{
            model: 21
            Rectangle{
               Layout.rowSpan: index === 0 ? 4 : 1
                height: 40
                width: height
                color: "blue"
                Text {
                    anchors.centerIn: parent
                    text: index
                }
            }
        }
    }

maybe see QML Flow type

[Nagarjun]

@LeLev

I want to show page where the items are displayed exactly as shown on the image attached.

The Grid will have multiple rectangles and the rows are displayed in the following order.
For example: If the grid has 4 rows, then 1st row will be represented as flow from left to right. The 2nd row will be represented as flow from right to left. Then 3rd row Left to right and 4th row as right to left. (Check attached image for row representation)

And also I have to represent the arrows in between the items as shown in picture.

[ODБOï]

@Nagarjun did you try my example? all you have to add to it is a function to show the correct numbers and the arrows.

[Nagarjun]

Hi @LeLev,

I tried your solution. Its showing the image. That is fine.
Now if i have more elements then its filling in the same space.
I need to scroll thorough the screen to see the elements.
How to do that ? How should I use Flickable in this case.

Note: For example: If the screen layout is 500x500, and each element size id 50x50,
then i should only see 16 elements initially. I have to scroll down on the screen to see the remaining elements.