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文档：

可以为对象添加对ExclusiveGroup的支持控制。它应该有一个checked属性，并且a checkedChanged，toggled（）或toggled（bool）信号。

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

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

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

1 个答案: