Best Qt Quick Tricks: Linking Properties to QML

The binding between the two properties (property binding) “a” and “b”, declared as “a: b”, updates the value “a” whenever the “b” is updated. Linking properties finds practical use in controlling the size of an element, controlling the position of an element using an anchor, dynamically changing text or images, controlling the color of an element or the state of buttons.

In its simplest form, "a" associated with "b" retains the same meaning as "b" for the entire duration of the binding properties. In a more advanced form, “a” binds to an arbitrary JavaScript expression that uses “b” as “a: b + 1”.

You can link more than two properties - "a: b * c + 1". In this case, the expression will be counted with each change of “b” or “c”.
')
The table below describes the value of "a", depending on how "b" and "c" change over time.

a: b * c + 1	a	b	c
initial values	one	0	0
b = 1	one	one	0
c = 2	3	one	2
b = -3	-five	-3	2

The possibilities of binding properties seem limitless, and, indeed, they can be established between properties of different types. Consider the color property “c” associated with the enumeration “e”. Of course, simply binding “c: e” will not work. But we can convert “e” by resorting to javascript:

function toColor(e) { switch(e) { case highlighted: return "blue"; case inactive: return "white"; default: return "black"; } } 

Now the binding of properties can be written in the form:

 c: toColor(e) 

It will work as expected: “c” will be correctly updated even if toColor itself depends on another property (except, of course, “e”) - however, such hidden dependencies should be avoided.
It is worth avoiding assigning values ​​to related properties. Properties are free (free properties) or associated (with other properties; bound properties). An explicit assignment of a value is allowed if the property is free. Once the property becomes bound, each new assignment will delete the previous property link. This can be a source of error and, therefore, should be avoided.

You can use property binding instead of explicit state control. If QML uses state control logic, then it is better to use a more advanced solution based on property binding. The result will be the same, but the state processing will be hidden behind the new properties. As soon as the state control logic begins to become more complex, it will become noticeable that the scalability of the binding properties is much higher (within the framework of the complexity of scaling).

Mark an item as active using explicit state processing.

 import QtQuick 1.0 //    ,    . Rectangle { id: canvas anchors.fill: parent color: "green" MouseArea { anchors.fill: parent onClicked: { canvas.state == "activated" ? canvas.state = "" : canvas.state = "activated" } } states: [ State { name: "activated" PropertyChanges { target: canvas color: "red" } } ] } 

We mark an element as active by applying a new property associated with the color of the element.

 import QtQuick 1.0 //    ,    . Rectangle { id: canvas anchors.fill: parent property bool activated: false color: activated ? "red" : "green" MouseArea { anchors.fill: parent onClicked: { canvas.activated = !canvas.activated } } } 

The flexibility and ease of use of binding properties explains why it is used throughout QML programming. When it comes to dynamic changes, elements must necessarily depend on their properties. Combined with the binding properties, these elements will work on "autopilot": after the initial setup, the elements will work correctly, regardless of other factors. This, in turn, allows you to work with more complex interfaces, while maintaining the purity of the code and reducing the risk of errors.

However, one has to pay for the advantages of using binding properties — under certain conditions, productivity may drop significantly. However, this is a separate topic, which will be devoted to the next article.