Состояния и переходы

Две важные концепции языка QML – состояния и переходы. Поскольку основная задача QML – описание виджетов, состояния и переходы имеют отношение к виджетам. Что такое состояния и переходы легко объяснить на примере такого элемента управления как кнопка. У кнопки может быть два состояния – обычное и нажатое (под нажатым состоянием понимается состояние кнопки, когда на нее «надавили» указателем мыши). Между этими двумя состояниями существует два перехода – из обычного состояния в нажатое и обратно. Переходы определяют графические эффекты, которыми сопровождается изменение состояния виджета. В самом простом случае без переходов можно вообще обойтись, достаточно просто перерисовать виджет в новом состоянии, но наличие переходов делает поведение виджетов гораздо более привлекательным и натуралистичным (или наоборот, необычным и привлекательным). Использование состояний и переходов поможет нам заставить цветные прямоугольники вести себя как настоящие кнопки. Вот как выглядит один из элементов Item, использующий состояния и переходы:

Item {

id: cell1; width: 40;

height: 25

Rectangle {

id : rect1; color: "blue"; border.color: "white"; anchors.fill: parent

}

MouseArea {

id : mouseArea; anchors.fill: parent; onClicked: root.color = "blue"

}

states: State { name: "down"; when: mouseArea.pressed == true

PropertyChanges { target: rect1; border.color : "#000088"; border.width : 2 }

}

transitions: Transition { from: ""; to: "down"; reversible: true }

}

Вся эта конструкция находится в теле объекта image, отвечающего з}

Свойству states элемента Item (в нашем примере этот элемент имеет идентификатор cell1) можно присвоить список дополнительных состояний. Мы описываем состояние "down", которое должен принимать элемент cell1, когда кнопка мыши нажата в области этого элемента. Структура PropertyChanges описывает само состояние. Целью состояния является прямоугольник rect1, у которого должны измениться толщина и цвет окаймляющей линии. Вообще говоря, «описать новое состояние элемента» означает в QML задать новые значения различных свойств элемента.

Точно так же свойство transitions содержит список переходов. Мы описываем один переход – из состояния по умолчанию в состояние "down". Обратите внимание, что свойству reversible присвоено значение true, которое указывает, что элемент должен переходить из состояния "down" в исходное, как только исчезнет условие, вызывающее состояние "down". Причем этот переход будет зеркальным отражением перехода из состояния по умолчанию в состояние "down". Если состояния определяют новые значения свойств элемента, то переходы определяют, как именно исходные значения свойств должны трансформироваться в новые. Например, с помощью переходов можно определить скорость изменения значения числового свойства. Для свойства типа color – цвет, можно также указать, с какой скоростью исходный цвет должен трансформироваться в конечный, и возможно, задать промежуточные цвета.

Например, мы можем бы добавить в описание перехода анимационный следующий эффект

ParallelAnimation {

ColorAnimation { duration:500}

NumberAnimation { duration:500}

}

Который указывает, что в процессе перехода должны одновременно меняться значения свойств численных типов и свойств, определяющих цвет, причем оба изменения должны занимать полсекунды. Начальные и конечные значения свойств при этом заданы состояниями, между которыми выполняется переход, а промежуточные значения QML в данном случае выбирает по умолчанию. В модифицированном примере clocks такая анимация применена к кнопке выбора синего цвета, что создает несколько необычное поведение для этой кнопки.