Important: Please read the Qt Code of Conduct -

[SOLVED] Behavior seems to have no effect

  • Hello,

    I'm learning QML, and I have a question about "Behavior".
    I wrote following code and the code doesn't work as expected.
    I expect that colors change slowly when I press and release a mouse button, but in fact colors change quickly.

    When I comment out the first Behavior line and uncomment the second (use "Behavior on" syntax), the problem is solved.
    What is wrong with the first Behavior line?

    import QtQuick 2.0

    Rectangle {
    id: rect
    width: 200
    height: 200

    MouseArea {
        anchors.fill: rect
        onPressed: rect.color = "black"
        onReleased: rect.color = "white"
    // This line seems to have no effect
    Behavior { ColorAnimation { property: color; duration: 1000 } }
    // This line works as expected
    //Behavior on color { ColorAnimation { duration: 1000 } }


  • Moderators

    The one on line 15 does not know what to base the bahaviour on. QML needs to know what property does the Behavior apply to. That's why line 18 works.

    Alternatively you can use this:
    ColorAnimation on color { duration: 1000 }
    // Or this:
    ColorAnimation { property: color; duration: 1000 }

  • Thanks sierdzio.

    I've got it.
    I must specify a target of Behavior with "on" syntax or use only ColorAnimation.

    In fact, my question came from the description of Behavior in "Getting Started Programming with Qt Quick.":
    Following code is in the article:
    In TextEditor.qml:

        NumberAnimation{property: "rotation";easing.type: Easing.OutExpo }

    This code doesn't include "on" syntax, so this will not work, won't it?

  • Moderators

    Please notice there is a difference between your example and the one taken from the tutorial: the tutorial is passing property name as a string, and you are not.

    I don't have QML engine VM in my head, so I can't say for sure whether it would work. You can try. Since it's in a tutorial it will probably work :)

  • Thanks sierdzio

    Let me summarize my experiment.

    work fine:
    Behavior on color {ColorAnimation { duration: 1000 }}

    doesn't work:
    Behavior {ColorAnimation { property: "color"; duration: 1000 }}
    Behavior {ColorAnimation { property: color; duration: 1000 }}
    ColorAnimation on color { duration: 1000 }
    ColorAnimation { property: "color"; duration: 1000 }
    ColorAnimation { property: color; duration: 1000 }

Log in to reply