Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Cannot apply transitions when using StateGroup in QML
Forum Updated to NodeBB v4.3 + New Features

Cannot apply transitions when using StateGroup in QML

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
1 Posts 1 Posters 170 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jay1
    wrote on last edited by
    #1

    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;
    
    }
    
    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved