Форма курсора изменилась даже над перекрывающимся прямоугольником в QML

Question

С помощью следующего кода зеленый прямоугольник полностью перекрывает красный прямоугольник, но когда мышь находится над (скрытым) красным прямоугольником, моя форма курсора по-прежнему изменяется в соответствии с красным MouseArea cursorShape. Любая идея предотвратить это поведение?

import QtQuick 2.0 

Rectangle { 
    width: 360 
    height: 360 

    Rectangle { 
     color: "red" 
     anchors.top: parent.top 
     anchors.bottom: parent.bottom 
     width: 100 
     MouseArea { 
      anchors.fill: parent 
      hoverEnabled: true 
      cursorShape: "ClosedHandCursor" 
     } 
    } 

    Rectangle { 
     color: "green" 
     anchors.fill: parent 
     MouseArea { 
      anchors.fill: parent 
      hoverEnabled: true 
     } 
    } 
} 

Answer 1

Просто используйте свойство «containsMouse» в связывании cursorShape, и не используйте форму Строки значений перечислений:

import QtQuick 2.0 

Rectangle { 
    color: "white"; 
    width: 400; 
    height: 400; 

    Rectangle { 
     color: "red"; 
     anchors.top: parent.top; 
     anchors.left: parent.left; 
     width: 300; 
     height: 300; 

     MouseArea { 
      anchors.fill: parent; 
      hoverEnabled: true; 
      cursorShape: (containsMouse 
          ? (pressed 
          ? Qt.ClosedHandCursor 
          : Qt.OpenHandCursor) 
          : Qt.ArrowCursor); 
     } 
    } 

    Rectangle { 
     color: "green"; 
     anchors.bottom: parent.bottom; 
     anchors.right: parent.right; 
     width: 300; 
     height: 300; 

     MouseArea { 
      anchors.fill: parent; 
      hoverEnabled: true; 
     } 
    } 
} 

Answer 2

import QtQuick 2.0 

Rectangle { 
    width: 360 
    height: 360 

    Rectangle { 
     color: "red" 
     anchors.top: parent.top 
     anchors.bottom: parent.bottom 
     width: 100 
     MouseArea { 
      anchors.fill: parent 
      hoverEnabled: true 
      cursorShape: greenRectangle.hovered ? Qt.ArrowCursor : Qt.ClosedHandCursor; 
     } 
    } 

    Rectangle { 
     id: greenRectangle; 

     property bool hovered: false; 

     color: "green" 
     anchors.fill: parent 
     anchors.leftMargin: 20; 
     MouseArea { 
      anchors.fill: parent 
      hoverEnabled: true 
      onHoveredChanged: { 
       greenRectangle.hovered = !greenRectangle.hovered; 
       console.log(greenRectangle.hovered); 
      } 
     } 
    } 
}