Solved 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
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.
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
in BlueBox.qml I changed the code as shown.
in the RedBox.qml
I made these changes...
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.
-
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
in BlueBox.qml I changed the code as shown.
in the RedBox.qml
I made these changes...
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.