Problem in handling parallel states in Qt/Qml

[PradeepChinnasamy]

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.

[sierdzio]

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.

[PradeepChinnasamy]

@sierdzio Thanks for your answer, it gives clarity on the states.

[GrecKo]

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