Custom button bug

giovannie

Two files.

Button.qml

@import QtQuick 2.0

Rectangle {
property alias enabled: mouseArea.enabled
signal clicked()

width: 100; height: 30
color: "lightgray"

function f()
{
    if (mouseArea.enabled)
        if (mouseArea.pressed)
            return "down";
        else if (mouseArea.containsMouse)
            return "over";
        else
            return "active";
    else
        return "disabled";
}

Text {
    id: image
    anchors.centerIn: parent
    text: f()
}

MouseArea {
    id: mouseArea
    anchors.fill: parent
    hoverEnabled: true
    onClicked: parent.clicked()
}

}
@

Main.qml

@import QtQuick 2.0

Item {
width: 300; height: 200
focus: true

Button { id: button1 }

Keys.onDigit1Pressed: button1.enabled = !button1.enabled

}
@

Button.qml is a simple button, which has a 4 states: normal, pressed, disabled and with mouse pointer over it. Button shows text inside itself depending of state.

Now run

@qmlviewer Main.qml@

Place mouse over the button, and text become "over".
Press key 1 (keyboard), and button become "disabled".
Remove mouse from button, button still "disabled".
Press key 1, and text become "over".

Step 4 is unexpected for me, because mouse is not over button already.

Any explanation?

Tested with Qt 4.8.4 and 5.0.1 for windows.

tzander

You wrote non-declaritive code in a declaritive app. This may indeed give weird results :)
Binding text to a function is not very declaritive, and I suggest you use things like the Keys and the MouseAreas signals instead.

giovannie

I think binding function call to a text property is ok, like any expression.

Problem is that containsMouse is not updated when MouseArea is disabled and enabled again.

There is a simpler program to show this.

@import QtQuick 1.1

Item {
width: 300; height: 200
focus: true

MouseArea {
    id: mouseArea
    anchors.fill: parent
    hoverEnabled: true
}

Text {
    text: "enabled: " + mouseArea.enabled +
        "; containsMouse: " + mouseArea.containsMouse
}

Keys.onDigit1Pressed: mouseArea.enabled = !mouseArea.enabled

}@

If move mouse to window, disable mouse area by pressing 1, then move mouse from window and enable mouse area by pressing 1 again, it shows that containsMouse stays true.