Лучшие приёмы Qt Quick: связывание свойств в QML

Связывание между двумя свойствами (property binding) «a» и «b», объявленное как «a: b», обновляет значение «a» всякий раз, когда обновляется «b». Связывание свойств находит практическое применение при управлении размером элемента, управлении положением элемента с помощью якоря, динамическом изменении текста или изображений, управлении цветом элемента или состоянием кнопок.

В самой простой форме «а», связанное с «b», сохраняет то же значение, что и «b», на протяжение всего времени связывания свойств. В более продвинутой форме «a» привязывается к произвольному JavaScript-выражению, которое использует «b» как «a: b + 1».

Связывать можно более двух свойств — «a: b * c + 1». В данном случае выражение будет считаться при каждом изменении «b» или «c».

В представленной ниже таблице описано значение «a», зависящее от того, как «b» и «c» меняются со временем.

a:b*c+1	a	b	c
начальные значения	1	0	0
b = 1	1	1	0
c = 2	3	1	2
b = -3	-5	-3	2

Возможности связывания свойств кажутся безграничными, и, действительно, они могут быть установлены между свойствами различных типов. Рассмотрим свойство цвета «c», связанное с перечислением «e». Разумеется, простое связывание «c: e» работать не будет. Но мы можем преобразовывать «e», прибегнув к JavaScript:

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

Теперь связывание свойств может быть записано в виде:

c: toColor(e)

Оно будет работать, как и ожидалось: «c» будет верно обновляться даже если toColor сам по себе зависит от другого свойства (кроме, разумеется «e») — однако такие скрытые зависимости лучше стараться избегать.
Стоит избегать присваивание значений связанным свойствам. Свойства бывают свободными (free properties) или связанными (с другими свойствами; bound properties). Присваивание значения в явном виде допускается, если свойство является свободным. Как только свойство становится связанным, каждое новое присваивание будет удалять предыдущую связь свойства. Это может стать источником ошибок и, поэтому, такого следует избегать.

Можно использовать связывание свойств вместо явного управления состоянием. Если в QML используется логика управления состоянием, то лучше использовать более продвинутое решение, основывающееся на связывании свойств. Результат при этом будет одинаков, однако обработка состояний будет скрыта за новыми свойствами. Как только логика управления состоянием начнёт становиться сложнее, станет заметно, что масштабируемость связывания свойств гораздо выше (в рамках сложности масштабирования).

Помечаем элемент как активный с использованием явной обработки состояния.

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"
            }
        }
    ]
}

Помечаем элемент как активный с применением нового свойства, связанного с цветом элемента.

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
        }
    }
}

Гибкость и простота использования связывания свойств объясняет, почему оно используется при программировании на QML повсеместно. Когда дело доходит до динамических изменений, элементы должны в обязательном порядке зависеть от своих свойств. В сочетании со связыванием свойств, эти элементы будут работать на «автопилоте»: после первоначальной настройки, элементы будут работать правильно, независимо от других факторов. Это, в свою очередь, позволяет работать с более сложными интерфейсами, сохранив при этом чистоту кода и снизив риск появления ошибок.

Впрочем, за плюсы использования связывания свойств приходится платить — при некоторых условиях может заметно упасть производительность. Однако, это уже отдельная тема, которой будет посвящена следующая статья.