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.0

    Item {
    id: root

    state: "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?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.