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

Solution 1

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
}

Solution 2

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.

Comments

[serkan gezer]

Thanks. it is very helpfull.

[MrPickles]

@JuliusG how would you get the index of whatever you clicked?

[JuliusG]

@MrPickles have a look at the childAt(...) method: doc.qt.io/qt-5/qml-qtquick-item.html#childAt-method

[Crawl.W]

May this answer is the better one.