Unsolved Qt / QML 5.8 support for mouse over
-
The project I'm working on is using Qt 5.8, I don't have any control over the version so I cannot switch to current or later release.
Is there anyway to detect when the mouse is over an image in this version?
I've tried implementing mouseArea it doesn't seem to be defined. I want to provide a scaling effect to the image when the mouse moves over an image.
-
You need to use containsMouse property. But remember to make hoverEnabled
true
first. -
Thank you I'll give it a go, I have tried the containsMouse, but hadn't set hoverEnabled.
In my Button.qml which is the underling QML definition for the button I have:
Component.onCompleted: { MouseArea.hoverEnabled = true; } scale: MouseArea.containsMouse ? 2.0 : 1.0; smooth: MouseArea.containsMouse
What I'm seeing in the Application Output are a lot of:
Button.qml:21:13: Unable to assign [undefined] to bool
21 is the line containing:
smooth: MouseArea.containsMouse
If I comment out that line, build and run, no more errors in Application Output, however the effect does not work and if I put the mouse over an image the scale is unchanged.
I can verify that setting the scale to 2.0 does double the size as I hard coded it to test. However this is not true in all cases, it seems that the buttons / images that are included in a row are not effected.
-
This is what I have now in the Button.qml:
MouseArea { hoverEnabled: true onEntered: { root.scale = 2.0; } onExited: { root.scale = 1.0; } }
Nothing happens, I have break points in both handlers, neither of them are actioned.
-
hi @SPlatten
you have to give your MouseArea a size, currently it has a size of 0 a
anchors.fill:parent
should be sufficientalso make sure to give your MouseArea an id, if you refer it outside/from somewhere else.
Something like thisComponent.onCompleted: { MouseArea.hoverEnabled = true; } scale: MouseArea.containsMouse ? 2.0 : 1.0; smooth: MouseArea.containsMouse
can't work, id's always start with a lowercase character
-
If I replace MouseArea with mouseArea it underlines it in red.
-
@SPlatten there is no default id; you have to explicitly define it
MouseArea { id:mouseArea hoverEnabled: true onEntered: { root.scale = 2.0; } onExited: { root.scale = 1.0; } }
-
Sorry, MouseArea is defined inside an object like this:
Button { id: root property bool showDropShadow: true /* Lots of other properties... */ MouseArea { hoverEnabled: true anchors: fill.parent /*on handlers */ } /* The rest of the button definition... */ }
Does MouseArea require its own id ?
Incidentally the anchors is a new addition after reading your post, it causes an application crash. -
anchors.fill:parent
andanchors: fill.parent
do you spot the difference ? ;)Does MouseArea require its own id ?
only if you want to access functions/properties outside the {} scope
-
Thank you.