如何访问 GridView - 或 ListView - 元素的 属性

Question

这是代码，我创建了 4 个按钮。单击其中一个时，我希望它的颜色变为红色，而所有其他颜色变为黑色。 但是看起来我无法访问 color 属性。

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

我建议您使用 QML 控件中的 ExclusiveGroup。通常它用于 Action，但也可以用于任何其他 Item。来自 Qt 文档：

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.

所以我们只需要添加合适的 属性。小例子：

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);
            }
        }
    }
}