Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Cannot apply transitions when using StateGroup in QML



  • I am trying to use the states in the QML but when i try to add the StateGroup the transitions are not applied or not visible but the state changes.

    The example i tested used to file "Main.qml" and "CustomComponent.qml".
    The "Main.qml" contains the customcomponent and button. when a button is pressed the state of the customcomponent is changed.
    The states are defined in the "CustomComponent.qml" file.

    Am I using the QStateGroup Tag in "CustomComponent.qml" in wrong way ?
    Can someone kindly suggest the correct or standard way ?

    Main.qml

    // ------------------------------File: Main.qml------------------------------------------------
    import QtQuick 2.14
    import QtQuick.Controls 2.14
    import QtQuick.Window 2.14
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Test Sample")
    
        CustomComponent
        {
            id: customComp
            width: 50
            height: 50
            x: 50
            y: 50
        }
    
        Button
        {
            id: button
            width: 150
            height: 150
            x: parent.width/2
            y: 150
            onClicked:
            {
                if(customComp.m_status === 'HIDE')
                {
                    button.text = 'SHOW';
                    customComp.m_status = 'SHOW';
                }
                else
                {
                    button.text = 'HIDE';
                    customComp.m_status = 'HIDE';
                }
            }
        }
    }
    

    CustomCoponent.qml

    import QtQuick 2.14
    
    Item {
        id: root
        property var m_StateNames: ['HIDE', 'SHOW']
        property var m_status: 'HIDE'
    
        state: m_status
    
        Rectangle
        {
            id: container
            anchors.fill: parent
            Image {
                id: containerImage
                anchors.fill: parent
                source: "qrc:/images/Hide.png"
            }
        }
    
        StateGroup
        {
            id: rootStateGroup
            states: [
                State {
                    id: hide
                    name: 'HIDE'
                    when: (root.state == 'SHOW')
                    PropertyChanges {
                        target: container;
                        rotation: 360;
                    }
                    PropertyChanges {
                        target: containerImage;
                        source: "qrc:/images/Hide.png"
                    }
                },
                State {
                    id: active
                   name: 'SHOW'
                   when: (root.state == 'HIDE')
                   PropertyChanges {
                       target: container;
                       rotation: 360;
                   }
                   PropertyChanges {
                       target: containerImage;
                       source: "qrc:/images/Show.png"
                   }
                }
            ]
    
            transitions: [
                Transition {
                    from: 'HIDE'
                    to: 'SHOW'
                    ColorAnimation {
                        from: "red"
                        to: "green"
                        duration: 2000
                    }
                    RotationAnimation {
                        duration: 2000;
                        direction: RotationAnimation.Clockwise
                    }
    
                },
                Transition {
                    from: 'SHOW'
                    to: 'HIDE'
                    ColorAnimation {
                        from: "green"
                        to: "red"
                        duration: 4000
                    }
                    RotationAnimation {
                        duration: 4000;
                        direction: RotationAnimation.Counterclockwise
                    }
    
                }
            ]
        }
    
        onStateChanged: rootStateGroup.state = m_status;
    
    }
    

Log in to reply