CODEWITHSUNDEEP
qtcursorqml
Guid
Guid

Reputation: 2216

Cursor shape changed even over an overlapping rectangle in QML

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
        }
    }
}

Upvotes: 2

Views: 3080

Answers (2)

TheBootroo
TheBootroo

Reputation: 7518

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;
        }
    }
}

Upvotes: 2

BlueMagma
BlueMagma

Reputation: 2495

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

Upvotes: 2

Related Questions