Is it possible to set condition base on color for OnClicked ?

kkai295

I have set 2 rectangles with 2 different colors. Only when both rectangles are turn red by the users, the user can click on a third button. I have been trying to get the third button to work base on detecting the colors of the previous 2 rectangles. Does it work???? or is there an alternative to detect the color ??

Is it possible to set condition base on color for OnClicked ?
MouseArea
{ anchors.fill: parent
onClicked: { if (apple.color = "#E3B4AA")
{pear.color ='white'}
else {pear.color='green'}}
}

mfatih

@kkai295 I believe so, but I advise you to use colorEqual method

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 270
    height: 270
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        x: 20; y: 20
        width: 100; height: 100
        color:"blue"
        MouseArea {
           anchors.fill: parent
           onClicked: Qt.colorEqual(parent.color, "red")?parent.color = "blue" : parent.color="red"
       }
    }

    Rectangle {
        id: rect2
        x: 150; y: 20
        width: 100; height: 100
        color:"blue"
        MouseArea {
           anchors.fill: parent
           onClicked: Qt.colorEqual(parent.color, "red")?parent.color = "blue" : parent.color="red"
       }
    }

    Rectangle {
        id: rect3
        x: 85; y: 150
        width: 100; height: 100
        color:"blue"

        MouseArea {
           anchors.fill: parent
           onClicked: {
               // Only change state when two other rectangle color is red
               if (Qt.colorEqual(rect1.color, "red") && Qt.colorEqual(rect2.color, "red"))
               {
                   Qt.colorEqual(parent.color, "red")?parent.color = "blue" : parent.color="red"
               }
           }
       }
    }
}

By the way, you can also utilize states for this purpose as illustrated below:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 270
    height: 270
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        x: 20; y: 20
        width: 100; height: 100
        state:"blueState"
        MouseArea {
           anchors.fill: parent
           onClicked: rect1.state == "redState"?rect1.state="blueState":rect1.state="redState"
       }

        states: [
            State {
               name: "redState";
               PropertyChanges { target: rect1; color: "red";  }},
            State {
               name: "blueState";
               PropertyChanges { target: rect1; color: "blue";  }
            }
        ]
    }

    Rectangle {
        id: rect2
        x: 150; y: 20
        width: 100; height: 100
        state:"blueState"
        MouseArea {
           anchors.fill: parent
           onClicked: rect2.state == "redState"?rect2.state="blueState":rect2.state="redState"
       }

        states: [
            State {
               name: "redState";
               PropertyChanges { target: rect2; color: "red";  }},
            State {
               name: "blueState";
               PropertyChanges { target: rect2; color: "blue";  }
            }
        ]
    }

    Rectangle {
        id: rect3
        x: 85; y: 150
        width: 100; height: 100
        state:"blueState"

        MouseArea {
           anchors.fill: parent
           onClicked: {
               // Only change state when two other rectangle color is red
               if (rect1.state == "redState" && rect2.state=="redState")
               {
                   rect3.state == "redState"?rect3.state="blueState":rect3.state="redState"
               }
           }
       }

        states: [
            State {
               name: "redState";
               PropertyChanges { target: rect3; color: "red";  }},
            State {
               name: "blueState";
               PropertyChanges { target: rect3; color: "blue";  }
            }
        ]
    }
}

GrecKo

Done without verbose state or complex imperative expressions, just an additional boolean property for each Rectangle and by binding the enabled property of the last Rectangle to the active property of the 2 others.
My advice is not to base your logic and the UI properties of your objects.
Stuff like redState or blueState aren't very semantic, and more like an implementation detail.

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 270
    height: 270
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        x: 20; y: 20
        width: 100; height: 100
        property bool active: false
        color: active ? "blue" : "red"
        MouseArea {
           anchors.fill: parent
           onClicked: parent.active = !parent.active
       }
    }

    Rectangle {
        id: rect2
        x: 150; y: 20
        width: 100; height: 100
        property bool active: false
        color: active ? "blue" : "red"
        MouseArea {
           anchors.fill: parent
           onClicked: parent.active = !parent.active
       }
    }

    Rectangle {
        id: rect3
        x: 85; y: 150
        width: 100; height: 100

        property bool active: false
        color: active ? "blue" : "red"
        enabled: rect1.active && rect2.active
        MouseArea {
           anchors.fill: parent
           onClicked: parent.active = !parent.active
       }
    }
}

kkai295

@mfatih oh! the state helps alot! THanks!!!

mfatih

@kkai295 Glad, it helped.
As @GrecKo pointed out (good point, thanks), it may be a little bit verbose for simple cases, but for more complex cases, I believe states might be useful.