How to access the properties of a Repeater's children in QML?

Question

Can you tell me for below code that is there any way to change the imgx element properties. I have to change imgx.x value using javascript. Or is there any other way? I search qt docs but not helpfull. Thanks.

Row {
    Repeater {
        id:mmm
        model : 10
        Rectangle{
            clip: true
            width: 54
            height: 80
            color:"transparent"
            Image {
                id:imgx
                //x:-160
                //x:-105
                //x:-50
                x:0
                source: "images/tarama_lights.png"
            }
        }
    }
}

score 30 · Accepted Answer · edited Apr 16 '14 at 15:15

30

You have to add a property to the direct child of the Repeater (Rectangle in your case) and set it as a target for the property in the internal child (Image in your case). You can then use mmm.itemAt(<index of the element>).<property> = value. Code:

Repeater {
  id:mmm
  model : 10
  Rectangle{
    clip: true
    width: 54
    height: 80
    color:"transparent"
    property int imageX: 0 //adding property here

    Image {
      id:imgx
      x: parent.imageX //setting property as the target
      source: "images/tarama_lights.png"
    }
  }
}

You can then change the property like this:

onPropertyChange: {
  mmm.itemAt(index).imageX = newValue //the index defines which rectangle you change
}

edited Apr 16 '14 at 15:15

Chris Krycho

3,125
1
23
35

answered Nov 07 '12 at 15:20

JuliusG

2,321
21
30

@JuliusG how would you get the index of whatever you clicked? – MrPickles Apr 18 '16 at 01:17
1

@MrPickles have a look at the childAt(...) method: http://doc.qt.io/qt-5/qml-qtquick-item.html#childAt-method – JuliusG Apr 20 '16 at 10:48

score 7 · Answer 2 · answered May 10 '16 at 09:52

JuliusG's answer is right in using itemAt. But it is not required to set it as a target for the property in the internal child (Image in your case). You can have your code as it is and instead of

onPropertyChange: {  mmm.itemAt(index).imageX = newValue //the index defines which rectangle you change }

use this:

onPropertyChange: {  mmm.itemAt(index).children[0].x = newValue //the index defines which rectangle you change }

Hope it helps.

May this answer is the better one. – Crawl.W Apr 17 '19 at 01:10 — Crawl.W, Apr 17 '19 at 01:10

How to access the properties of a Repeater's children in QML?

2 Answers2