Possible to tell the number of an item within a repeater?
-
I have 6images I want to use as buttons on a 3x2 grid. I want them all to behave the same, just use different images based on their index in the repeater. The images are named image_1.png ... image_6.png etc. is there a way I can set properties of an item in a repeater based on what number in the repeater the item is?
-
Hi,
You can use the index property inside the Repeater. Based on it you can set the images.
For eg.
@
Item {
width: 400
height: 400Repeater { id: repeater model: 5 Rectangle { x: index * 50 y: 0 width: 50 height: 50 color: '#'+Math.floor(Math.random()*16777215).toString(16) } }
}
@Here i have used index property to change x property of every Rectangle in the repeater.
Is this what you expect ? -
You can access the index property in your delegate. A way to do it when you have formatted file names:
@
import QtQuick 2.2Grid {
width: 150
height: 100
columns: 3
rows: 2Repeater { model: 6 delegate: Image { source: "image_" + index + ".png" width: 50 height: 50 } }
}
@Another way to achieve the same, but using modelData instead of the index attached property (for the case or you cannot use a counting logic):
@
import QtQuick 2.2Grid {
width: 150
height: 100
columns: 3
rows: 2Repeater { model: [ "first.png", "second.png", "third.png", "fourth.png", "fifth.png", "sixth.png" ] delegate: Image { source: modelData width: 50 height: 50 } }
}
@ -
These are exactly what I was looking for. I just found it in the documentation on repeaters also. Thanks! I ended up using the index like this:
@Image {
source: "button" + index + ".png"
}@because all my button images are buttonX.png.