[Solved] How to create such a pattern using QML

[kamalakshantv]

I want to display an element is the below mentioned pattern

!http://i55.tinypic.com/akigt3.jpg!

How can I achieve it in QML

Edit: updated the pattern

[EDIT: fixed image link, Volker]

[Zmozie]

It should be easy, I would put the circles in an Item for each row and anchor it to the center. Then the middle row just have one less circle and will be layout exactly like that.

[kamalakshantv]

Thank you, I had used it like that, but wanted to know if it can be displayed like that using grid and repeater.

[kenotenshi]

You can check out one of my tutorial on my blog where I create circle components and I use a Row coupled with a Repeater ("here":http://bsauts-en.blogspot.com/2011/02/second-qml-tutorial.html)
From that starting point, it should be easy for you to define 3 Rows.

[huluyige]

my workground is just like the one of kenotenshi:

using repeaters in 3 Rows

[kamalakshantv]

I have followed the same. But wanted to know if there was any way to make it using Grid and single repeater. It seems it cannot be done so.

Thank you all.

[DenisKormalev]

QtK, it is of course cann not be done with Grid. grid has square cells and in your example cells are hexagonal. So you need something like HexagonalGrid (which of course is not available in Qt, so you need to write by yourself)

[task_struct]

You can create circles dynamicly with JS and position them. On odd rows circles start from x=0, x = circle.width, x = circle.width*2, .., x = circle.width * n and on even rows from x = circle.width / 2, x = circle.width + circle.width/2, ..., x = circle.width * n + circle.width/2. Also you can add spacing in calculations.