Change property of a repeater children from the main

[DavidM29]

Hello,

My title is quite unclear I apalogize for it.
To give you a better explanation here is a screenshot of the simplified example I made :

In this example the green Rectangles are generated via a repeater in a specific QML file.
The checkboxes are part of the main.qml
From here when I click a green rectangle it toggles the associated checkbox. What I want to do know is to toggle the rectangle via the checkboxes but I don't know how to do this.
As well the color will change depending on the checkbox states.

Here is the code I have simplified for a use case :
main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle{
        id : rect
        width: 640
        height: 480/10
        anchors.top: parent.top
        anchors.topMargin: 50
        Rectangles{
            width: parent.width
            height: parent.height
            anchors.verticalCenter: parent.verticalCenter
        }
    }


    Text{
        id: rectangles
        text: qsTr("Rectangles :")
        anchors.top: rect.bottom
        anchors.topMargin: 50
        font.pointSize: 10.5
        anchors.horizontalCenter: parent.horizontalCenter
    }
    CheckBox{
        id: r1
        height: 23
        anchors.left: rectangles.left
        anchors.leftMargin: 15
        anchors.top:  rectangles.bottom
        text:  "Rect 1"
        checked: true
    }
    CheckBox{
        id: r2
        height: 23
        anchors.left: rectangles.left
        anchors.leftMargin: 15
        anchors.top:  r1.bottom
        text:  "Rect 2"
        checked: true
    }
    CheckBox{
        id: r3
        height: 23
        anchors.left: rectangles.left
        anchors.leftMargin: 15
        anchors.top:  r2.bottom
        text:  "Rect 3"
        checked: true
    }
    CheckBox{
        id: r4
        height: 23
        anchors.left: rectangles.left
        anchors.leftMargin: 15
        anchors.top:  r3.bottom
        text:  "Rect 4"
        checked: true
    }
    CheckBox{
        id: r5
        height: 23
        anchors.left: rectangles.left
        anchors.leftMargin: 15
        anchors.top:  r4.bottom
        text: "Rect 5"
        checked: true
    }
}

Rectangles.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1

Item {
    id : container
    RowLayout{
        spacing: 5
        Repeater{
            id: repeat
            model: 5
            Rectangle {
                width: (container.width/5)- 5
                height: container.height
                radius: height/2
                color: "#009900"
                border.width: 1
                MouseArea{
                    anchors.fill: parent
                    onClicked: switchRectangles(index)
                }
            }
        }
    }
    
    function switchRectangles(index){
        switch(index){
        case 0 :
            r1.checked = !r1.checked
            break
        case 1 :
            r2.checked = !r2.checked
            break
        case 2 :
            r3.checked = !r3.checked
            break
        case 3 :
            r4.checked = !r4.checked
            break
        case 4 :
            r5.checked = !r5.checked
            break
        }
    }
}

In the final result when I click a Rectangle I should toggle the associated checkbox and change the rectangle color because the checkboxe state change. And when I click on the checkbox the associated rectangle change its color.

I don't know how to achieve such a link between elements in differents qml file (In my final case the rectangles are not in the first child of my main like in this case I have a few qml file in between)

Can you please help me with that ?

[Diracsbracket]

@DavidM29
You can use the itemAt(index) of Repeater .
To access the Repeater from your main, you must first declare an alias in your Rectangles file, like so:

Item {
    id : container
    property alias repeat: repeat
    ....
}

Luckily, aliases can have the same name as the object they reference...

Also, give your Rectangles instance an id, e.g.

        Rectangles{
            id: rects
             ....
        }

Then, in your checkboxes e.g. Rect4 (repeater index = 3) you can use:

    CheckBox{
        id: r4
        height: 23
        anchors.left: rectangles.left
        anchors.leftMargin: 15
        anchors.top:  r3.bottom
        text:  "Rect 4"
        checked: true
        onCheckedChanged: {
            rects.repeat.itemAt(3).color = checked ? "blue" : "green"
        }
    }

[egor.utsov]

@DavidM29 What if you pass checkboxes ids as array to Rectangles like property checkboxes: [r1, r2, r3, r4, r5] in main.qml
and then inside Rectangles bind to checked property like this:

Repeater {
    Rectangle {
        color: checkboxes[index].checked ? "red" : "green"
    }
}

[egor.utsov]

@DavidM29 And then try to to something similar in back direction. Also you can use checkboxes property also for change checked property.

[DavidM29]

Thank you for your answers. I tried the first idea because in the final code I will not have simple id with corresponding index on my checkboxes but I believe it could work as well.
The first solutions seems to works fine even if I had to make a few alias properties to reach the Rectangles from my main.