[SOLVED] QML states not updating image rotation property



  • Try running the code below yourself. When the button is clicked, the state changes, but the image rotation does not change like it's supposed to. (I know you don't have the images, but the debug console output shows you it doesn't change, still 0) Also, if I set the initial state of the button to 'hidden' it does not automatically set the opacity=0 as the state should be directing it to. What am I doing wrong?

    @import QtQuick 1.1

    Rectangle {
    id: dropDownButton
    width: 28
    height: width
    opacity: 1
    color: "transparent"
    property string state: "collapsed";

    // Possible Button States = "collapsed" or "expanded" or "hidden"
    signal buttonStateChange(string state);
    
    Image {
        id: button
        source: "images/button-blue.png"
        anchors.fill: parent
        Image {
            id: dropDownButtonArrow
            source: "images/white-triangle.png"
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            rotation: 0
        }
        MouseArea {
            anchors.fill: parent;
            onClicked: {
                dropDownButton.state = (dropDownButton.state === "expanded") ? "collapsed" : "expanded";
                buttonStateChange(dropDownButton.state);   // send signal to notify button owner
                console.log("state=" + dropDownButton.state + "  imgrotation=" + dropDownButtonArrow.rotation);
            }
        }
    }
    states: [
        State {
            name: "collapsed";
            PropertyChanges {
                target: dropDownButtonArrow;
                rotation: 0
            }
            PropertyChanges {
                target: button;
                opacity: 1
            }
        },
        State {
            name: "expanded";
            PropertyChanges {
                target: dropDownButtonArrow;
                rotation: 180
            }
            PropertyChanges {
                target: button;
                opacity: 1
            }
        },
        State {
            name: "hidden";
            PropertyChanges {
                target: dropDownButtonArrow;
                rotation: 0
            }
            PropertyChanges {
                target: button;
                opacity: 0
            }
        }
    ]
    

    }
    @



  • Change the name of 'state' custom property to something else(like '_state') and update it along with the default 'state' property(or just use the default property instead)... The state property is present in the elements by default and by defining a custom property by the same name, you over-ride it... Hence in your code, when the 'state' changes, it is just the your custom string property named 'state' that is changing, not the state of the element...



  • Good explanation, thanks.

    So I just deleted the 'property string' bit so that I'm using the default 'state' property and now everything works correctly.


Log in to reply
 

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