QML PropertyChanges Element

Detailed Description

PropertyChanges is used to define the property values or bindings in a State. This enables an item's property values to be changed when it changes between states.

To create a PropertyChanges object, specify the target item whose properties are to be modified, and define the new property values or bindings. For example:

 import QtQuick 1.0

 Item {
     id: container
     width: 300; height: 300

     Rectangle {
         id: rect
         width: 100; height: 100
         color: "red"

         MouseArea {
            id: mouseArea
            anchors.fill: parent
         }

         states: State {
            name: "resized"; when: mouseArea.pressed
            PropertyChanges { target: rect; color: "blue"; height: container.height }
         }
     }
 }

When the mouse is pressed, the Rectangle changes to the resized state. In this state, the PropertyChanges object sets the rectangle's color to blue and the height value to that of container.height.

Note this automatically binds rect.height to container.height in the resized state. If a property binding should not be established, and the height should just be set to the value of container.height at the time of the state change, set the explicit property to true.

A PropertyChanges object can also override the default signal handler for an object to implement a signal handler specific to the new state:

 PropertyChanges {
     target: myMouseArea
     onClicked: doSomethingDifferent()
 }

Note: PropertyChanges can be used to change anchor margins, but not other anchor values; use AnchorChanges for this instead. Similarly, to change an Item's parent value, use ParentChanges instead.

 Rectangle {
     width: 300; height: 200

     Text {
         id: myText
         width: 50
         wrapMode: Text.WordWrap
         text: "a text string that is longer than 50 pixels"

         states: State {
             name: "widerText"
             PropertyChanges { target: myText; width: undefined }
         }
     }

     MouseArea {
         anchors.fill: parent
         onClicked: myText.state = "widerText"
     }
 }

 PropertyChanges {
     target: myItem
     explicit: true
     width: parent.width
 }