Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Change property of a repeater children from the main



  • 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 :
    0_1534432014592_fedf19a8-08da-412e-bc74-7ca3030d29a3-image.png

    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 ?



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


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


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



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


Log in to reply