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?


  • Moderators

    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 ?



  • 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
        }
    }
    

    }
    @



  • 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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.