Propagate hover events to several MouseAreas
-
There is propagateComposedEvents property in "MouseArea":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html, but it propagates ONLY mouse click events, and does NOT propagate hover events.
This behavior hinders to do something like "this":http://stackoverflow.com/questions/18135262/how-can-i-implement-this-scenario-using-qml
If I place bigger MouseArea with z: -1 and smaller MouseArea with z: 1 then bigger MouseArea receive onExited signal each time I enter in smaller MouseArea which is error and strange behaviour, strictly speaking (because mouse coords are still in bigger MouseArea rectangle).
So, is there any solution?
How I can propagate hover events in two or more items, or
how I can achieve behaviour shown in "this example":http://stackoverflow.com/questions/18135262/how-can-i-implement-this-scenario-using-qml? -
Simple make states for each state of the elements in the View then you can use things like if statements or case statements to change these properties In Other words, Try not to set your elements up to work on MouseArea but on properties And set the Elements properties to work on the set properties I hope that this helps if not here is example
EDIT
I added the color to be transparent. if there is no mouse what so ever. If I was using a Image I would use opacity then add a bunch of Behaviors also But this is a working
example :
@import QtQuick 2.0
Rectangle {
width: 360
height: 360
property string state1:"OutMouse"
property string state2: "OutMouse"
property string state3: "OutMouse"
property string state4: "OutMouse"
Rectangle{
id:blueRec
width: parent.width
height: parent.height / 6
color: state1 === "InMouse" ? "blue" : "green"
MouseArea{
anchors.fill: blueRec
hoverEnabled: true
onEntered: state1 = "InMouse"
onExited: {
if (state1 === state2 || state3 || state4){
state1 = "InMouse"
}
if(state1 !== state2 || state3 || state4)
{
state1 = "OutMouse"
}
}
}
Text {
text: state1=== "InMouse"? qsTr("foo") :"bar"
anchors.centerIn: blueRec
}
Row{
width: parent.width
height: parent.height / 4spacing: 2 anchors{ left: parent.left verticalCenter: blueRec.verticalCenter leftMargin: blueRec.width / 12 } Rectangle{ id: rec1 height: parent.height; width: height color: { if ( state3 === "InMouse") return "gray" if (state1 === "OutMouse") return "transparent" else return "white"} MouseArea{ id: rec1M anchors.fill: parent hoverEnabled: true onEntered:{ state1 = "InMouse" state2 = "InMouse" } onExited: state2 = "OutMouse" } } Rectangle{ id: rec2 height: parent.height ; width: height color: { if (state3 === "InMouse") return "gray" if (state1 === "OutMouse") return "transparent" else return "white" } MouseArea{ id: rec2M anchors.fill: parent hoverEnabled: true onEntered:{ state1 = "InMouse" state3 = "InMouse" } onExited: state3 = "OutMouse" } } Rectangle{ id: rec3 height: parent.height; width: height color:{ if (state4 === "InMouse") return "gray" if (state1 === "OutMouse") return "transparent" else return "white" } MouseArea{ id: rec3M anchors.fill: parent hoverEnabled: true onEntered:{ state4 = "InMouse" state1 = "InMouse" } onExited: state4 = "OutMouse" } } } }
}
@
-
Thank you for reply, your example really works, but there is one flaw.
You implicitly assume that you can change code of smaller rectangles, so smaller rectangles knows that they placed in some bigger one, they must set its property to some value, furthermore bigger rectangle knows about all smaller ones, it know names of its properties and so on...
All these conflicts with case when you develop reusable, library-like, scalable qml components.
Actually I want to write qml component, in which I can place arbitrary content, and, in case if this content will not find room in component, component will offer facility to temporary expand. Here is some screenshots
!http://img-fotki.yandex.ru/get/9303/11330794.1c/0_a5570_95cd1970_orig!
!http://img-fotki.yandex.ru/get/4906/11330794.1c/0_a5571_599897fb_orig!Realization in second screenshot could be better - without green arrow and (most important) without need to press this green arrow, if I could shrink by timer. If there is no mouse in expanded area for 10 seconds it shrinks automatically.
But in this case I must know where is mouse... And this leads to my initial question...
-
Do you have these examples and pictures in a repository somewhere that is public that I can look at ? I have done what you are showing in the pictures above I used a model and a view and each models currentItem().width on a count to make these changes happen. The delegate sends a signal. But I am not sure that I understand what it is that you are trying to do.If it would be better to make something like a marquee for your Pictures and or my big questions where is the data coming from ? Like the Pictures the On Clicked and Entered and Exit ect. are these just buttons in a delegate ? Just keep in mind that you can set signal to things also. Also just wanted to say that the BigRec knows nothing about the smaller Rec in my examples All it knows about is the property string state[1,2] at any rate If you post some example code. I will take a look at it. Have a good one.
-
Ok, "here":https://docs.google.com/file/d/0B4r5nJvpzEHGenVuSUJCQUtyWkU/edit?usp=sharing is full example
Build
run
press expand button
then move mouse to red rectangle and you shall see message "Entered" in console (Ok)
then move it to some toolbutton in the red rectangle and you shall see message "Exited" (error, mouse still in red rectangle!)
The rectangle is in hover_events/ExpansibleBar.qml:19