Cursor shape changed even over an overlapping rectangle in QML

2
votes

With the following code, the green rectangle entirely overlaps the red rectangle, but when the mouse is over the (hidden) red rectangle, my cursor shape is still changed according to the red MouseArea cursorShape. Any idea to prevent this behavior?

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
        }
    }
}
2
qtcursorqml
I'm not sure what your problem is. You want the cursor not to change shape, or the red Rectangle not to be overlap ? – BlueMagma
Ok, there was an error in my original post, I just corrected it. In fact, I don't want the mouse shape to change when it is over the red rectangle simply because this red rectangle is hidden. – Guid

2 Answers

2
votes

Simply use 'containsMouse' property in the binding of cursorShape, and don't use the String form of enum values :

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