QML Basic Type: var

A var is a generic property type capable of storing any data type. It is equivalent to a regular JavaScript variable. For example, var properties can store numbers, strings, objects, arrays and functions:

 Item {
     property var aNumber: 100
     property var aBool: false
     property var aString: "Hello world!"
     property var anotherString: String("#FF008800")
     property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
     property var aRect: Qt.rect(10, 10, 10, 10)
     property var aPoint: Qt.point(10, 10)
     property var aSize: Qt.size(10, 10)
     property var aVector3d: Qt.vector3d(100, 100, 100)
     property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
     property var anObject: { "foo": 10, "bar": 20 }
     property var aFunction: (function() { return "one"; })
 }

It is important to note that changes in regular properties of JavaScript objects assigned to a var property will not trigger updates of bindings that access them. The example below will display "The car has 4 wheels" as the change to the wheels property will not cause the reevaluation of the binding assigned to the "text" property:

 Item {
     property var car: new Object({wheels: 4})

     Text {
         text: "The car has " + car.wheels + " wheels";
     }

     Component.onCompleted: {
         car.wheels = 6;
     }
 }

If the onCompleted handler instead had "car = new Object({wheels: 6})" then the text would be updated to say "The car has 6 wheels"., since the car property itself would be changed, which causes a change notification to be emitted.

A var type property can also hold an image or pixmap. A var which contains a QPixmap or QImage is known as a "scarce resource" and the declarative engine will attempt to automatically release such resources after evaluation of any JavaScript expression which requires one to be copied has completed.

Clients may explicitly release such a scarce resource by calling the "destroy" method on the var property from within JavaScript. They may also explicitly preserve the scarce resource by calling the "preserve" method on the var property from within JavaScript. For more information regarding the usage of a scarce resource, please see Scarce Resources in JavaScript.