PDA

View Full Version : loops in QML ?



itwasduke
23rd November 2016, 19:47
Hi i need to make alot of rectangles and i wonder if there are any loop commands in qml ?

this kind of rectangle 169 times ;/

Rectangle{
width: chart.width / 13
height: char.height / 13
anchors.top: parent
color: "lightgrey"
id: item1
border.width: 1

Label{
text: "text"
anchors.centerIn: parent
}
}

thx

sedi
23rd November 2016, 20:27
Absolutely. You may want to look at the Repeater QML element (http://doc.qt.io/qt-5/qml-qtquick-repeater.html)
Something along these lines should work (untested):

Repeater {
model: 169
Rectangle{
width: chart.width / 13
height: char.height / 13
anchors.top: parent
x: (1024/170) * index
color: "lightgrey"
id: item1
border.width: 1

Label{
text: "text"+index
anchors.centerIn: parent
}
}

Of course you can use models with much greater complexity than a simple number.

itwasduke
23rd November 2016, 21:47
Thx alot sedi!

itwasduke
24th November 2016, 21:42
well repeater can not solve my problems or i can not figure it out
problems i have are id of all items as well as anchoring and putting text


id: ab
anchors.left: aa.right
label text: "AB"

id: ac
anchors.left: ab.right
label text: "AC"

id: ad
anchors.left: ac.right
label text: "AD"

it will be matrix 13x13 and i should be able to change each element by clicking on it by a mouse - change color and label ,
can i do it w/o id in rectangles at all ?
i need also those rectangle have different values on start

anda_skoa
25th November 2016, 10:50
it will be matrix 13x13 and i should be able to change each element by clicking on it by a mouse - change color and label ,
can i do it w/o id in rectangles at all ?
i need also those rectangle have different values on start

For a grid like positioning you can just put the Repeater into a Grid element.
When the repeater creates its delegates, it will hand them over to its parent. If the parent is a Grid, it will position them in as many columns (or rows) as you specify
E.g. this creates a grid with 13 columns, number of rows depends on the number of items, in this case 2 rows


Grid {
columns: 13

Repeater {
model: 26
Text {
text: model.index
}
}
}


Each delegate can of course have its own MouseArea for mouse handling, etc.

Cheers,
_

itwasduke
25th November 2016, 16:26
thx i will play with that also, need to read about that mouse area also :) again thx