[solved] How to modify Gradient in a state's PropertyChange?



  • I have a Rectangle with the following gradient:
    @
    gradient: Gradient
    {
    GradientStop { position: 0; color: "#424242" }
    GradientStop { position: 1; color: "#313131" }
    }
    @

    I want to make a smooth transition of the gradient to another gradient when the rectangle is pressed. The following doesn't work:

    @
    states: State
    {
    name: "down"; when: (mouseArea.pressed === true);
    PropertyChanges { target: frame; gradient[0].color: "#929292"; }
    PropertyChanges { target: frame; gradient[1].color: "#818181"; }
    }
    @

    The frame target is my Rectangle. Accessing the gradient property like this doesn't seem to be allowed. Realizing that http://qt-project.org/doc/qt-5/qml-qtquick-gradient.html documents the members of Gradient being members of a property list called stops, I changed the lines containing PropertyChanges to:

    @
    PropertyChanges { target: frame; gradient.stops[0].color: "#929292"; }
    PropertyChanges { target: frame; gradient.stops[1].color: "#818181"; }
    @

    However, this still doesn't work. I found http://qt-project.org/doc/qt-4.8/qml-list.html and learned that property lists may only be assigned to new lists, but members may not be modified. So, I tried creating a new gradient instead:

    @
    PropertyChanges
    {
    target: frame;
    gradient: Gradient
    {
    GradientStop { position: 0; color: "#929292" }
    GradientStop { position: 1; color: "#818181" }
    }
    }
    @

    This isn't allowed either, because PropertyChanges may only modify existing properties, but they are not allowed to create new objects.

    How do I achieve my goal?



  • I found the solution: Simply give each GradientStop an id, and use these ids as the target of the PropertyChange.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.