How to access the property of a GridView - or ListView - element

Question

Here is the code, I create 4 buttons. When one is clicked I wanna that its color changes to red and the color of all the others change to black. But looks like I could not access the color property.

Rectangle {
    id: root
    width: 200; height: 100

    DelegateModel {
        id: visualModel
        model: ListModel {
            ListElement { my_color: "red" }
            ListElement { my_color: "black" }
            ListElement { my_color: "black" }
            ListElement { my_color: "black" }
        }

        groups: [
            DelegateModelGroup { name: "selected" }
        ]

        delegate: Rectangle {
            id: item
            height: 25
            width: 200
            color:my_color
            MouseArea {
                anchors.fill: parent
                onClicked: {
                   console.log(visualModel.items.get(index).color)
                   for (var i = 0; i < root.count; i++){
                       if(index == i)
                        visualModel.items.get(i).color = "red";
                       else
                        visualModel.items.get(i).color = "black";
                   }
                }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: visualModel
    }
}

Answer 1

I advice you to use ExclusiveGroup from QML controls. Usually it is used for Action but it's possible to use it for any other Item. From the Qt docs:

It is possible to add support for ExclusiveGroup for an object or control. It should have a checked property, and either a checkedChanged, toggled(), or toggled(bool) signal.

So all we need is to add suitable property. Small example:

import QtQuick 2.5
import QtQuick.Window 2.0
import QtQuick.Controls 1.4

Window {
    width: 200
    height: 400

    ExclusiveGroup { id: exclusiveGroup }
    ListView {
        anchors.fill: parent
        anchors.margins: 5
        spacing: 2
        model: 10
        delegate: Rectangle {
            id: myItem
            property bool checked: false // <-- this is necessary
            height: 30
            width: parent.width
            color: myItem.checked ? "lightblue" : "#DEDEDE"
            border { width: 1; color: "#999" }
            radius: 5
            Text { text: "item" + (index + 1); anchors.centerIn: parent}
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: myItem.checked = !myItem.checked;
            }
            Component.onCompleted: {
                exclusiveGroup.bindCheckable(myItem);
            }
        }
    }
}