Possible to tell the number of an item within a repeater?

ggwolf

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?

p3c0

Hi,

You can use the index property inside the Repeater. Based on it you can set the images.
For eg.
@
Item {
width: 400
height: 400

Repeater {
    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 ?

jb2a

You can access the index property in your delegate. A way to do it when you have formatted file names:

@
import QtQuick 2.2

Grid {
width: 150
height: 100
columns: 3
rows: 2

Repeater {
    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.2

Grid {
width: 150
height: 100
columns: 3
rows: 2

Repeater {
    model: [
        "first.png",
        "second.png",
        "third.png",
        "fourth.png",
        "fifth.png",
        "sixth.png"
    ]

    delegate: Image {
        source: modelData
        width: 50
        height: 50
    }
}

}
@

ggwolf

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.