（QML日历示例）当将自定义MouseArea添加到委托的矩形中时，日历将无法更改选择

Question

我试图了解QtQuick / Calendar示例的内部工作原理。 可以在这里找到：

https://qt-project.org/doc/qt-5/qtquickcontrols-calendar-example.html

，实际代码在：

https://qt-project.org/doc/qt-5/qtquickcontrols-calendar-qml-main-qml.html

在它的dayDelegate中，它具有如下定义的Rectangle：

dayDelegate: Item {


                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0
                            }

我正在尝试根据委托用户点击的位置添加自定义处理功能。我将委托更改为：

dayDelegate: Item {
                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0
                        MouseArea {
                                anchors.fill: parent
                                onClicked:
                                {
                                    dayDelegateText.text  = dayDelegateText.text == "two" ? "one" : "two"

                                }
                            }

但是，一旦我这样做，日历就不再对当前所选项目之外的点击做出反应。 我通过添加此MouseArea来打破什么？

更令人困惑的是，如果我将这个区域添加到一个矩形中，该矩形是委托矩形的子项并且隐藏重叠，那么一切都按照我想要的方式工作，我可以在委托内操作并更改选择。

dayDelegate: Item {

                    Rectangle {
                        anchors.fill: parent
                        border.color: "transparent"
                        color: styleData.date !== undefined && styleData.selected ? selectedDateColor : "transparent"
                        anchors.margins: styleData.selected ? -1 : 0


                        Rectangle {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            width: styleData.selected ? parent.width/2 : 0
                            height:styleData.selected ? parent.height/2 : 0
                            color: "gray"

                            MouseArea {
                                    anchors.fill: parent
                                    onClicked:
                                    {
                                        dayDelegateText.text  = dayDelegateText.text == "two" ? "one" : "two"
                                    }
                                }
                        }
                    }

Answer 1

有助于可视化您添加的MouseArea：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    width: 300
    height: 300

    Calendar {
        id: calendar
        anchors.centerIn: parent
        style: CalendarStyle {
            dayDelegate: Item {
                Rectangle {
                    id: rect
                    anchors.fill: parent

                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        horizontalAlignment: Text.AlignRight
                        font.pixelSize: Math.min(parent.height/3, parent.width/3)
                        color: styleData.selected ? "red" : "black"
                        font.bold: styleData.selected
                    }
                    MouseArea {
                        anchors.fill: parent
                        Rectangle {
                            anchors.fill: parent
                            color: "transparent"
                            border.color: "darkorange"
                        }
                    }
                }
            }
        }
    }
}

因为每个代理中都有一个MouseArea，Calendar的鼠标区域 - 覆盖所有日代表的单个区域 - 无法获取所有代理区域的鼠标事件通过MouseArea s。

您的第三个代码段有效，因为您只占用了每个代表的一半区域 - 而且只有在选择该特定日期时才会这样做：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Rectangle {
    width: 300
    height: 300

    Calendar {
        id: calendar
        anchors.centerIn: parent
        style: CalendarStyle {
            dayDelegate: Item {
                Rectangle {
                    id: rect
                    anchors.fill: parent

                    Label {
                        id: dayDelegateText
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        horizontalAlignment: Text.AlignRight
                        font.pixelSize: Math.min(parent.height/3, parent.width/3)
                        color: styleData.selected ? "red" : "black"
                        font.bold: styleData.selected
                    }
                    MouseArea {
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        width: styleData.selected ? parent.width / 2 : 0
                        height: styleData.selected ? parent.height / 2 : 0
                        Rectangle {
                            anchors.fill: parent
                            color: "transparent"
                            border.color: "darkorange"
                        }
                    }
                }
            }
        }
    }
}

然而，很难建议一种方法来实现你所追求的目标，因为你没有告诉我们你想要做什么。