Problem in handling parallel states in Qt/Qml
-
I am trying to set my view in two states at the same time with two different conditions with when property, but only the first condition works and the respective states are set. Though the value in the second condition changes, the states are not set. My example here...
import QtQuick 2.0 import QtQuickUltralite.Extras 2.0 Item { id: signal property int show: 0 property int showtwo: 0 Rectangle{ id: rect1; width: 50; height: 50; color: "green"; visible: false} Rectangle{ id: rect2; y:100; width: 50; height: 50; color: "red"; visible: false} Rectangle{ id: rect3; x:100; width: 50; height: 50; color: "yellow"; visible: false} Rectangle{ id: rect4; x:100; y:100; width: 50; height: 50; color: "black"; visible: false} states: [ State { name: "green" when: signal.show === 0 PropertyChanges{ target: rect1; visible: true} }, State { name: "red" when: signal.show === 1 PropertyChanges{ target: rect2; visible: true} }, State { name: "yellow" when: signal.showtwo === 0 PropertyChanges{ target: rect3; visible: true} }, State { name: "black" when: signal.showtwo === 1 PropertyChanges{ target: rect4; visible: true} } ] Timer { running: true; repeat: true; interval: 1000 onTriggered: { console.log(signal.show) if(signal.show === 0) { signal.show = 1 signal.showtwo = 1 } else { signal.show = 0 signal.showtwo = 0 } } } }
Though the values are changed for signal.showtwo, the corresponding states "yellow" and "black" are never set. What is missing here ? How can I achieve this in qml ?
I am using QtforMCU v2.0.0. But the behavior is same in Qt5.x as well.
-
You cannot have 2 active states in a single item at the same time. Either move the states to corresponding rectangles (then they can be completely independent), or combine them together, like so:
- red and black
- green and yellow
- etc.
-
You cannot have 2 active states in a single item at the same time. Either move the states to corresponding rectangles (then they can be completely independent), or combine them together, like so:
- red and black
- green and yellow
- etc.
@sierdzio Thanks for your answer, it gives clarity on the states.
-
Or don't use states at all.
import QtQuick 2.0 import QtQuickUltralite.Extras 2.0 Item { id: signal property bool show: false property bool showtwo: false Rectangle{ id: rect1; width: 50; height: 50; color: "green"; visible: !signal.show } Rectangle{ id: rect2; y:100; width: 50; height: 50; color: "red"; visible: signal.show } Rectangle{ id: rect3; x:100; width: 50; height: 50; color: "yellow"; visible: !signal.showtwo } Rectangle{ id: rect4; x:100; y:100; width: 50; height: 50; color: "black"; visible: signal.showtwo } Timer { running: true; repeat: true; interval: 1000 onTriggered: { console.log(signal.show); signal.show = !signal.show; signal.showtwo = !signal.showtwo; } } }