Основы синтаксиса QML

Добавлено 10 мая 2022 в 00:44

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

Исходный код QML обычно загружается движком через документы QML, которые являются автономными документами QML кода. Их можно использовать для определения объектных типов QML, которые затем можно повторно использовать в приложении. Обратите внимание, что имена типов должны начинаться с заглавной буквы, чтобы их можно было объявить как типы объектов QML в файле QML.

Инструкции импорта

Документ QML может иметь в верхней части файла один или несколько импортов. Импорт может быть любым из:

версионное пространство имен, в котором типы были зарегистрированы (например, плагином);
каталог (относительный путь), который содержит определения типов в виде документов QML;
файл JavaScript.

Импорт файлов JavaScript должен быть квалифицирован, чтобы можно было получить доступ к свойствам и методам, которые они предоставляют.

Общая форма различных импортов выглядит следующим образом:

import ПространствоИмен МажорнаяВерсия.МинорнаяВерсия
import ПространствоИмен МажорнаяВерсия.МинорнаяВерсия as УникальныйИдентификаторТипа
import "каталог"
import "file.js" как ИдентификаторСкрипта

Примеры:

import QtQuick 2.0
import QtQuick.LocalStorage 2.0 as Database
import "../privateComponents"
import "somefile.js" as Script

Подробную информацию об импорте QML смотрите в документации QML Syntax – Import Statements.

Объявления объектов

Синтаксически блок кода QML определяет дерево создаваемых объектов QML. Объекты определяются с помощью объявлений объектов, которые описывают тип создаваемого объекта, а также атрибуты, которые должны быть присвоены объекту. Каждый объект может также объявлять дочерние объекты, используя вложенные объявления объектов.

Объявление объекта состоит из имени его типа объекта, за которым следует набор фигурных скобок. Затем внутри этих фигурных скобок объявляются все атрибуты и дочерние объекты.

Вот простое объявление объекта:

Rectangle {
    width: 100
    height: 100
    color: "red"
}

Этот код объявляет объект типа Rectangle, за которым следует набор фигурных скобок, охватывающих атрибуты, определенные для этого объекта. Тип Rectangle – это тип, предоставляемый модулем QtQuick, и атрибуты, определенные в этом случае, являются значениями свойств ширины, высоты и цвета прямоугольника (эти свойства доступны благодаря типу Rectangle и описаны в документации Rectangle).

Приведенный выше объект может быть загружен движком, если он является частью документа QML. То есть, если исходный код дополнен оператором импорта, который импортирует модуль QtQuick (чтобы сделать доступным тип Rectangle), как показано ниже:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

При помещении в файл .qml и загрузке механизмом QML приведенный выше код создает объект Rectangle, используя тип Rectangle, предоставляемый модулем QtQuick:

Примечание. Если определение объекта имеет небольшое количество свойств, его можно записать в одну строку следующим образом, разделив свойства точкой с запятой:

Rectangle { width: 100; height: 100; color: "red" }

Очевидно, что объект Rectangle, объявленный в этом примере, действительно очень прост, поскольку он не определяет ничего, кроме нескольких значений свойств. Для создания более полезных объектов объявление объекта может определять много других типов атрибутов: они обсуждаются в следующей главе «Атрибуты объектов QML». Кроме того, объявление объекта может определять дочерние объекты, как описано ниже.

Дочерние объекты

Любое объявление объекта может определять дочерние объекты через вложенные объявления объектов. Таким образом, любое объявление объекта неявно объявляет дерево объектов, которое может содержать любое количество дочерних объектов.

Например, приведенное ниже объявление объекта Rectangle включает объявление объекта Gradient, которое, в свою очередь, содержит два объявления GradientStop:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

Когда этот код загружается движком, он создает дерево объектов с объектом Rectangle в корне; у этого объекта есть дочерний объект Gradient, у которого, в свою очередь, есть два дочерних объекта GradientStop.

Обратите внимание, однако, что это отношение родитель-потомок в контексте дерева объектов QML, а не в контексте визуальной сцены. Концепция отношений родитель-потомок в визуальной сцене обеспечивается типом Item из модуля QtQuick, который является базовым типом для большинства типов QML, поскольку большинство объектов QML предназначены для визуального отображения. Например, Rectangle и Text являются типами на основе Item, и в коде ниже объект Text объявлен как визуальный дочерний элемент объекта Rectangle:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

Когда объект Text ссылается на свое родительское значение в приведенном выше коде, он ссылается на своего визуального родителя, а не на родителя в дереве объектов. В данном случае это одно и то же: объект Rectangle является родителем объекта Text как в контексте дерева объектов QML, так и в контексте визуальной сцены. Однако в то время как свойство parent можно изменить для изменения визуального родителя, родитель объекта в контексте дерева объектов нельзя изменить из QML.

Кроме того, обратите внимание, что объект Text был объявлен без присвоения его свойству Rectangle, в отличие от предыдущего примера, в котором объект Gradient был назначен свойству gradient прямоугольника. Это связано с тем, что свойство children элемента Item было установлено как свойство по умолчанию для типа, чтобы включить этот более удобный синтаксис.

Text {
    text: "Hello world!"    // простое приветствие
    /*
        Мы хотим, чтобы этот текст выделялся среди остальных,
        поэтому даем ему большой размер и другой шрифт.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

Комментарии игнорируются движком при обработке кода QML. Они полезны для объяснения того, что делает раздел кода, будь то для напоминания или для объяснения реализации другим.

Комментарии также можно использовать для предотвращения выполнения кода, что иногда полезно для отслеживания проблем.

Text {
    text: "Hello world!"
    //opacity: 0.5
}

В приведенном выше примере объект Text будет иметь обычную непрозрачность, так как строка opacity: 0.5 была преобразована в комментарий.

Инструкции импорта

Объявления объектов

Дочерние объекты

Комментарии

Теги