Введение в язык QML
QML это декларативный язык, предназначенный для описания пользовательского интерфейса программы: и как он выглядит, и как он себя ведет. В QML, пользовательский интерфейс определен как дерево объектов со свойствами. Это введение предназначено для тех, кто мало программировал или не имеет опыта программирования. JavaScript используется в качестве скриптового языка в QML, так что вы можете узнать немного больше и об этом (см. Руководство Javascript), прежде чем погрузиться глубже в QML. Это также полезно, иметь общее представление о других веб-технологий, таких как HTML и CSS, но это не требуется. Базовый синтаксис QML. Синтаксис QML выглядит следующим образом:
import QtQuick 1.0 Rectangle { width: 200 height: 200 color: "blue" Image { source: "pics/logo.png" anchors.centerIn: parent } }
Здесь мы создаем два объекта, объект Rectangle (прямоугольник) и его дочерний объект Image (изображение). Объекты задаются их типом, за которым следует пара фигурных скобках, между которыми, для объекта могут быть определены дополнительные данные, например, значения свойств и все дочерние объекты. Свойства задаются с помощью синтаксиса: property: value (свойство: значение). В приведенном выше примере, мы видим свойство объекта Image с именем source, которому было присвоено значение "pics/ logo.png". Свойство и его значение разделяются двоеточием. Свойства можно задать в одной строке:
Rectangle { width: 100 height: 100 }
или вы можете определить несколько свойств в одной строке:
Rectangle { width: 100; height: 100 }
Когда несколько свойств / значения указаны в одной строке, они должны быть разделены точкой с запятой. Оператор импорта импортирует модул QtQuick, который содержит все стандартные элементы QML. Без этого оператора импорта, объект Rectangle и Image, не будут доступны. Комментарий. Комментарий в QML похожи на комментарий в JavaScript. Однострочные комментарии начинаются с // и заканчиваются концом строки. Многострочные комментарий начинаются /* и заканчиваются с */
Text { text: "Hello world!" //a basic greeting /* We want this text to stand out from the rest so we give it a large size and different font. */ font.family: "Helvetica" font.pointSize: 24 }
Комментарии игнорируются "компилятором". Они полезны для объяснения того, что вы делаете, возвращаясь к коду позже, или для других читающих ваши QML файлы. Комментарии могут быть также использованы для предотвращения исполнения кода, что иногда полезно для отслеживания проблем.
Text { text: "Hello world!" //opacity: 0.5 }
В приведенном выше примере, текстовый объект будет иметь нормальное непрозрачность, так как строка opacity: 0.5 был превращен в комментарий. Идентификаторы объектов. Каждому объекту может быть дано особое значение идентификатора, который позволяет идентифицировать объект и сослался на другие объекты. Например, ниже мы имеем два объекта Text. Первый объект Text имеет значение идентификатора "text1".Второй объект Text может устанавливать свое собственные значения свойства текста, который будет то же, что и первый объект, ссылаясь на Text1.Text:
import QtQuick 1.0 Row { Text { id: text1 text: "Hello World" } Text { text: text1.text } }
Объект может быть отражен своим идентификатором из любого компонента, в котором он объявлен. Таким образом, значение идентификатора всегда должен быть уникальным в пределах одного компонента. Значение ID имеет особое значение для QML объекта и не должна рассматриваться как обычные свойства объекта, например, не возможно получить доступ text1.id в приведенном выше примере. После того как объект создан, его идентификатор не может быть изменен. Обратите внимание, что идентификатор должен начинаться с строчной буквы или символом подчеркивания, и не может содержать символы отличные от букв, цифр и символов подчеркивания. Выражения JavaScript выражения могут использоваться для присвоения значений свойств. Например:
Item { width: 100 * 3 height: 50 + 22 }
Эти выражения могут содержать ссылки на другие объекты и свойства, и в этом случае обязательно установлено следующее: когда значение выражения изменяются, свойство, к которому выражения присваивается автоматически обновляется на новое значение. Например:
Item { width: 300 height: 300 Rectangle { width: parent.width - 50 height: 100 color: "yellow" } }
Here, the Rectangle object's width property is set relative to the width of its parent. Whenever the parent's width changes, the width of the Rectangle is automatically updated. Здесь, свойство width (ширина) объекта Rectangle имеет значение по отношению к ширине его родителя. Всякий раз, когда ширина родителей изменения, ширина прямоугольника автоматически обновляется. Свойства: Базовые свойства QML поддерживает свойства многих типов (см. QML Основные типы).Основные типы: int, real, bool, string и color.
Item { x: 10.5 // a 'real' property state: "details" // a 'string' property focus: true // a 'bool' property ... }
Свойства QML типизированы. То есть, они только позволяют назначить значение свойства, которое соответствует их типу. Например, свойство х у объекта Item является real (вещественный), и если вы попытаетесь присвоить к нему строку, вы получите сообщение об ошибке.
Item { x: "hello" // illegal! }
Обратите внимание, что за исключением Вложенных свойств, свойства всегда начинаются со строчной буквы. Уведомления об изменении свойств. При изменении значении свойства, он может отправить сигнал для уведомления других объектов об этом изменении. To receive these signals, simply create a signal handler named with an on<Property>Changed syntax. For example, the Rectangle element has width and color properties. Below, we have a Rectangle object that has defined two signal handlers, onWidthChanged and onColorChanged, which will automaticallly be called whenever these properties are modified: Для получения этих сигналов, просто создайте обработчик сигнала с синтаксическим именем on<Property>Changed. Например, элемент Rectangle имеет свойства width и color. Ниже мы в качестве примера, привели элемент Rectangle, которому определил два обработчика сигналов, onWidthChanged и onColorChanged, которые будут автоматический вызываться, при изменении этих свойств:
Rectangle { width: 100; height: 100 onWidthChanged: console.log("Width has changed to:", width) onColorChanged: console.log("Color has changed to:", color) }
Обработчики сигналов описаны ниже. Список свойств: Список свойств выглядеть следующим образом:
Item { children: [ Image {}, Text {} ] }
Список заключается в квадратные скобки, элементы списка разделяются запятыми. В случаях, когда вы назначаете только один элемент в список, можете опустить квадратные скобки:
Image { children: Rectangle {} }
Items in the list can be accessed by index. See the list type documentation for more details about list properties and their available operations. Элементы в списке могут быть доступны по индексу. Смотрите перечень документации типов, для более подробной информации о списке свойств и их доступных операций. Свойства по умолчанию Each object type can specify one of its list or object properties as its default property. If a property has been declared as the default property, the property tag can be omitted. Каждый тип объекта можно указать один из списков или свойства объекта, как его свойство по умолчанию. Если свойство было объявлено как свойство по умолчанию, то тег свойства может быть опущен. Пример:
State { changes: [ PropertyChanges {}, PropertyChanges {} ] }
может быть упрощено до:
State { PropertyChanges {} PropertyChanges {} }
потому что changes является свойством по умолчанию типа State. Сгруппированные свойства In some cases properties form a logical group and use a 'dot' or grouped notation to show this. Сгруппированные свойства можно записать так:
Text { font.pixelSize: 12 font.bold: true }
или так:
Text { font { pixelSize: 12; bold: true } }
В элементе документации сгруппированных свойств отображаются с использованием 'dot' запись. Вложенные свойства Некоторые объекты придают свойства к другому объекту. Вложенные свойства имеют вид Type.property где Type это тип элемента, который придает свойства. Например, элемент ListView придает свойство ListView.isCurrentItem ,каждому создаваемому делегату:
Component { id: myDelegate Text { text: "Hello" color: ListView.isCurrentItem ? "red" : "blue" } } ListView { delegate: myDelegate }
Другой пример вложенных свойств является элемент Key, который придает свойства для обработки нажатий клавиш для любого визуального элемента Item, например:
Item { focus: true Keys.onSelectPressed: console.log("Selected") }
Обработчики сигналов Обработчики сигналов позволяет выполнить JavaScript-код, в ответ на событие. Например, элемент MouseArea имеет обработчик onClicked, который может быть использован в ответ на щелчок мыши. Ниже, мы используем этот обработчик для печати сообщения при щелчке мышью:
Item { width: 100; height: 100 MouseArea { anchors.fill: parent onClicked: { console.log("mouse button clicked") } } }
Все обработчики сигналов начинаются с "оn". Некоторые обработчики сигналов дополнительный параметр. Например обработчик сигнала мыши MouseArea onPressed имеет параметр, который содержит информацию о нажатие кнопки мыши. Этот параметр может быть передан в код JavaScript, как показано ниже:
MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton onPressed: { if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed") } } Это перевод официальной документации про QML, распространяемый под лицензий GNU FDL 1.3. Оригинал на английском можете найти по адресу: http://doc.qt.nokia.com/4.7/qdeclarativeintroduction.html