Dynamically change rectangle gradient
-
I am trying to dynamically change a Rectangle gradient, but I'm not sure the syntax. This does not work:
@ Rectangle{
id:tt
width: height
height: parent.height*1.5
color: "black"
anchors.centerIn: parentgradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop {position: 1.0; color: "blue" } } MouseArea{ onEntered: { tt.gradient=Gradient{ GradientStop { position: 0.0; color: "red" } GradientStop {position: 1.0; color: "yellow" } } } }@
This won't even compile, the onEntered contents are not proper syntax, but I'm not sure how to manipulate the gradient in there.
Any ideas?
-
You can define a bool property supposed "overArea" in Rectangle and in the gradient use "color: overArea ? "lightsteelblue" : "red". besides that, set the property values in the MouseArea onEntered and onExited events, don't forget to set anchors.fill and hoverEnable property of MouseArea