QML：使用 onclick 设置矩形的颜色答案

【问题标题】：QML: Set the color of Rectangles with onclickQML：使用 onclick 设置矩形的颜色
【发布时间】：2018-03-18 19:55:43
【问题描述】：

总的来说，我对 QT 和 QML 比较陌生。我见过一些例子，在这些例子中，按下矩形时可以改变一些外部对象（如文本）的颜色。但是，我想做一些相关但不同的事情。

设置：

我想要一个矩形网格。假设是 5x5 网格。所有这些矩形都可以是蓝色的。大小并不重要。

示例：

如果我在 (0,0) 处按下矩形，它的颜色应该会变为红色。
如果我在 (0,1) 处按下矩形，它的颜色也会变为红色。
如果一个矩形是红色的，我按下它，它应该会变回蓝色。

理想情况下，我还想知道哪些矩形是红色的，哪些是蓝色的。希望我以后能弄清楚。现在，如果有人可以帮助我从改变颜色开始，那将非常有用。知道如何在按下单个 Rectangle 时更改它的颜色会很有帮助。提前谢谢！

【问题讨论】：

此页面上的第一个示例doc.qt.io/qt-5/qml-qtquick-mousearea.html。您可以从 Qt 安装中包含的欢迎示例中学到很多东西。
接下来查找 gridlayout 或 gridview 来制作您的网格。欢迎使用 Qt 和 QML。我希望你喜欢它。
@MarkCh，感谢您提供的信息。这个例子非常有帮助。不知道为什么我自己找不到（有点尴尬）。如果我想按住并让它改变它们的颜色。我需要考虑拖动吗？
我认为您需要使用onEntered 和onClicked。不过我没试过
仅供参考，否决票不是我，但我怀疑推理可能是缺乏研究或过于宽泛（意思不是很具体，要求回答者从头开始，没有起点并写一个小程序）。将来可以通过尝试编写自己的代码并将其发布在问题中来避免。

标签： gridview qml qt5 pyqt5

【解决方案1】：

Item {
id: root
width: 500
height: 500

Column {
    Repeater {
        id: column
        model: 5
        Row {
            Repeater {
                id: row
                model: 5
                Rectangle {
                    id: rect
                    property bool isBlue: true
                    width: 100
                    height: 100
                    color: isBlue ? "blue" : "red"
                    border.color: "white"
                    border.width: 5
                    Text {
                        font.pixelSize: 15
                        anchors.centerIn: parent
                        text: rect.isBlue ? "blue" : "red"
                        color: "white"
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            rect.isBlue = !rect.isBlue
                        }
                    }
                }
            }
        }
    }
}

}

【讨论】：