Unsolved 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; }