Описания состояний
Описания состояний в QML определяют набор значений свойства, которые оно может получать из начального состояния. Начальное состояние инициализирует свойство пустой строкой. После изменения значений можно вернуться к начальному состоянию, присвоив свойству state пустую строку.
В следующем примере реализованы состояния, соответствующие двум разным цветам. В определении объекта "красного прямоугольника" задается свойство id. Это необходимо потому, что на объекты с именами могут ссылаться соседние или дочерние элементы. Для объекта определены два состояния: красное и оранжевое. Свойство state задает элементу первоначальное состояние. Описания состояний элемента включают в себя условие when, которое определяет, когда устанавливается данное состояния. Здесь видно, что состояние меняется на красное в момент нажатия кнопки мыши или сенсора в области MouseArea. Описанные в коде состояния задают не только цвет прямоугольника, а также его ширину и высоту. В "оранжевом" состоянии размер кнопки увеличивается. При изменении состояний область обработки нажатия кнопки мыши onClicked обновляется.
id: buttonRect; state: "red" states: [ State { name: "red" when: mouseArea.pressed == true PropertyChanges { target: buttonRect; color: "red"; width: 80; height: 40 } }, State { name: "orange" when: mouseArea.pressed == false PropertyChanges { target: buttonRect; color: "#ff9900"; width: 120; height: 80 } } ]
Листинг 2. Определение состояний. Состояния можно определять прямо в коде, как в рассмотренном примере, или с помощью редактора Qt Quick Designer в Qt Creator. Чтобы создать переходы между состояниями, определяются элементы Transition. Эти элементы используют информацию о начальном и конечном состояниях, чтобы осуществить плавное изменение свойства, используя элементы Animation. Элементы Animation применяют ряд различных кривых сглаживания и методы группировки. Это дает разработчику и дизайнеру высокую степень контроля над тем, как и когда происходит переход свойства от состояния к состоянию. Более подробно этот вопрос рассматривается ниже.
Компоненты qml
Рассмотренный в первой части пример Hello World (сделать ссылкой на первую статью) продемонстрировал, что собой представляет QML-документ. Следует отметить, что имя QML-документа также имеет значение. Если оно начинается с прописаной (заглавной) буквы, это означает, что определяется одиночный QML-компонент верхнего уровня. QML-компонент — это шаблон, который используется для создания объекта с предопределенным поведением во время выполнения программы. QML-компонент может быть запущен на выполнение несколько раз, при этом создается несколько различных объектов, которые называются экземплярами компонента. После того, как экземпляры созданы, они больше не зависят от того компонента, от которого они произведены, и поэтому могут работать с независимыми данными. Рассмотрим пример простого компонента Button (определенного в файле Button.qml), из которого создается четыре различных кнопки в файле application.qml. Каждый экземпляр создается со своим значением свойства text:
MouseArea { anchors.fill: parent onClicked: { if (parent.state == "red") { parent.state = "orange" } else { parent.state = "red"; } } }
Листинг 3. Простые переходы между состояниями.
|
|
import Qt 4.7 Column { spacing: 10 Button { text: ”Apple” } Button { text: ”Orange” } Button { text: ”Pear” } Button { text: ”Grape” } } |
|
Листинг 4. Создание четырех кнопок с разными значениями свойства text. |
|
import Qt 4.7 Rectangle { property alias text: textItem.text width: 100; height: 30 border.width: 1 radius: 5 smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "darkGray" } GradientStop { position: 0.5; color: "black" } GradientStop { position: 1.0; color: "darkGray" } } Text { id: textItem anchors.centerIn: parent font.pointSize: 20 color: "white" } }
Листинг 5. Файл Button.qml создает компонент "кнопка". Заметим, что QML-документы могут включать создание встроенных компонентов с помощью элемента Component.