Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[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