Dynamically change rectangle gradient

[qttester5]

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: parent

        gradient: 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?

[qttester5]

i managed to do this not by adjusting the gradient directly, but by making the colors property's of the rectangle and binding the gradient to those properties, and then adjusting those properties from the mouse area.

[nus1998]

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

[surfsky]

I got the same trouble, how to dynamical adjust gradient.stops(insert/remove/clear)? I want to create a GradientColorPicker controls. tks lots

[surfsky]

I got the same trouble, how to dynamical adjust gradient.stops(insert/remove/clear)? I want to create a GradientColorPicker controls. tks lots