How to Trigger properties if another object is overlapped ?



  • I have a blue rectangle that turns yellow when hovered, then I have 4 smaller red rectangles over the blue rectangle

    I want the red rectangles to turn pink when hovered, but I also want the original blue rectangle to turn yellow if the mouse is over any part of the blue rectangle.

    I am using the standard Qt Creator Empty Project with Qt Quick 2.0

    alt text

    BlueBox.qml

    
    import QtQuick 2.0
    
    Item {
        property int bbWidth:100
        property int bbHeight:100
        property int bbX:0
        property int bbY:0
    
    
        Rectangle {
            id: blueBox
            width:bbWidth
            height:bbHeight
            color: "blue"
            x: bbX
            y: bbY
    
    
            Rectangle {
                id: colorYellow
                width: parent.width
                height: parent.height
                color: "yellow"
                visible: false
            }
    
    
    
            MouseArea {
                width: parent.width
                height: parent.height
    
    
                hoverEnabled: true
    
                onEntered: {
                    colorYellow.visible = true
                }
                onExited: {
                    colorYellow.visible = false
                }
            }
        }
    
    
    }
    
    
    

    RedBox.qml

    import QtQuick 2.0
    
    Item {
            property int rbWidth:100
            property int rbHeight:100
            property int rbX:0
            property int rbY:0
    
            Rectangle {
                id:redBox
                width:rbWidth
                height:rbHeight
                color: "red"
                x: rbX
                y: rbY
                border.color: "black"
                border.width: 1
    
    
                Rectangle {
                    id: colorGreen
                    width: parent.width
                    height: parent.height
                    color: "Green"
                    border.color: "black"
                    border.width: 1
                    visible: false
                }
    
    
    
                MouseArea {
                    width: parent.width
                    height: parent.height
    
    
                    hoverEnabled: true
    
                    onEntered: {
                        colorGreen.visible = true
                    }
                    onExited: {
                        colorGreen.visible = false
                    }
                }
            }
    
    
        }
    
    

    main.qml

    import QtQuick 2.10
    import QtQuick.Window 2.10
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        BlueBox {
            id: testBlueBox1
    
            bbHeight: 100
            bbWidth: 382
            bbX: 50
            bbY: 50
    
            RedBox {
              id: testRedBox1
               rbHeight: 90
               rbWidth: 90
               rbX:56
               rbY:56
    
               MouseArea {
                   hoverEnabled: true
                   onEntered: {
                       //How to set testBlueBox1 to yellow
                   }
                   onExited: {
                       //How to set testBlueBox1 back to BlueBox
                       //Is there anyway to keep box yellow until the
                       //mouse is not physically over the testBlueBox1
                   }
               }
            }
    
            RedBox {
              id: testRedBox2
               rbHeight: 90
               rbWidth: 90
               rbX:150
               rbY:56
    
            }
    
            RedBox {
              id: testRedBox3
               rbHeight: 90
               rbWidth: 90
               rbX:244
               rbY:56
    
            }
    
            RedBox {
              id: testRedBox4
               rbHeight: 90
               rbWidth: 90
               rbX:338
               rbY:56
    
            }
        }
    
    
        BlueBox {
            id: testBlueBox2
    
            bbHeight: 100
            bbWidth:382
            bbX: 50
            bbY: 200
        }
    }
    
    

    Here is the problem in a video format of the issue.

    http://take.ms/gID5f

    Is this a limit of QML or can this be done?



  • I think I may have figured it out... Maybe someone else will have a better idea.

    I created a global property by declaring the property in main.qml

    property bool vTest: false
    
    

    alt text

    in BlueBox.qml I changed the code as shown.

    alt text

    in the RedBox.qml

    I made these changes...
    alt text

    Here is final result... it's not perfect if you take it really slow it works, but if you move your mouse to fast the blue box does not come back unless you make sure you deliberate mouse out on the larger square.

    http://take.ms/PzNRq


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.