(Пример календаря 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 имеет прямоугольник, который определяется следующим образом:

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 «s - одну область, которая охватывает все делегатов в день - не могут получить никаких событий мыши для областей, которые принимаются вашим 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.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" 
         } 
        } 
       } 
      } 
     } 
    } 
} 

Однако, это трудно предложите способ добиться того, что вам нужно, поскольку вы не сказали нам, что вы пытаетесь сделать.