State not "drawn" when being set
-
Hello everyone,
I have one small problem. I wanted to make a sidebar, when you hover the mouse over a "button" a sidebar will slide out, and when the mouse exits the sidebar it will contract. It kinda works, but the problem is when, I exit the sidebar's mousearea to another mousearea the sidebar was overlapping, it doesn't "draw" contracted state, in console I'm able to see that the current state is correct and that onExited signal was fired.
It does work, if you exit to a non mousearea.
Illustration, might help, note the sidebar is the dark green:
!http://morf.lv/modules/zlTeam/images/qt_questions/exit_problem.png(Problem)!Here is the sidebars code:
@
import QtQuick 2.0Item {
id: rootstate: "contracted" width: 65 Item { id: content anchors { top: parent.top left:parent.left bottom: parent.bottom } width: 50 Rectangle { id: background anchors.fill: parent color: "#099898" } MouseArea { id: contentMouseArea anchors.fill: parent hoverEnabled: true onExited: { root.state = "contracted" console.log("Exited " + root.state) } } } Item { id: openButton anchors.left: content.right anchors.verticalCenter: root.verticalCenter width: 15 height: 40 Rectangle { anchors.fill: parent; color: "#099898" } Image { anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: -15 source: "./img/images/appbar.navigate.next.png" width: 40 height: 40 } MouseArea { id: openButtonMouseArea anchors.fill: parent hoverEnabled: true onEntered: root.state = "expanded" } } states: [ State { name: "expanded" PropertyChanges { target: openButton; opacity:0 } PropertyChanges { target: content; width:50 } }, State { name: "contracted" PropertyChanges { target: openButton; opacity:1 } PropertyChanges { target: content; width:0 } } ] transitions: [ Transition { from: "expanded" to: "contracted" NumberAnimation { target: openButton; property: "opacity"; duration: 200; easing.type: Easing.InOutQuad } NumberAnimation { target: content; property: "width"; duration: 200; easing.type: Easing.InOutQuad } }, Transition { from: "contracted" to: "expanded" NumberAnimation { target: openButton; property: "opacity"; duration: 200; easing.type: Easing.InOutQuad } NumberAnimation { target: content; property: "width"; duration: 200; easing.type: Easing.InOutQuad } } ]
}
@
Could this be a bug, or am I missing something?