Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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'}}
    }



  • @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";  }
                }
            ]
        }
    }
    
    

  • Qt Champions 2018

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


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



  • @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.


Log in to reply