QML

QML
Расширение имени файла	.qml
Тип интернет-СМИ	текст/x-qml
Разработано	Qt-проект
Тип формата	Язык сценариев
Веб-сайт	qt-проект .org /док /qt-5 /qmlapplications .html

QML
Парадигма	Мультипарадигма : декларативный , реактивный , скриптовый.
Разработчик	Qt-проект
Впервые появился	2009 год ; 15 лет назад
Стабильная версия	6.4 / 29 сентября 2022 г .; 22 месяца назад
Дисциплина набора текста	динамичный , сильный
Веб-сайт	док .qt .что /qt-5 /qmlapplications .html
Под влиянием
	ХАМЛ , JSON , JavaScript , Qt
Под влиянием
	Qt , Кольцо

QML ( язык моделирования Qt ^[4]) — язык разметки пользовательского интерфейса . Это декларативный язык (похожий на CSS и JSON ) для разработки приложений, ориентированных на пользовательский интерфейс. Встроенный код JavaScript обрабатывает императивные аспекты. Он связан с Qt Quick , набором для создания пользовательского интерфейса, первоначально разработанным Nokia в рамках Qt . Qt Quick используется для мобильных приложений, где сенсорный ввод, плавная анимация и пользовательский опыт имеют решающее значение. QML также используется с Qt3D. ^[5] описать 3D-сцену и методологию рендеринга «графика кадров». Документ QML описывает иерархическое дерево объектов. QML-модули ^[6] поставляемые с Qt, включают примитивные графические строительные блоки (например, Rectangle, Image), компоненты моделирования (например, FolderListModel, XmlListModel), поведенческие компоненты (например, TapHandler, DragHandler, State, Transition, Animation) и более сложные элементы управления (например, Button , слайдер, ящик, меню). Эти элементы можно комбинировать для создания компонентов различной сложности: от простых кнопок и ползунков до полноценных интернет-программ.

Элементы QML могут быть дополнены стандартным JavaScript как встроенными, так и включенными файлами .js. Элементы также можно легко интегрировать и расширять с помощью компонентов C++ с использованием инфраструктуры Qt.

QML — это язык; его среда выполнения JavaScript — это специальный движок V4, ^[7] начиная с Qt 5.2; ^[8] а Qt Quick — это граф 2D-сцены и основанная на нем платформа пользовательского интерфейса. Все они являются частью модуля Qt Declarative, хотя технология больше не называется Qt Declarative.

Код QML и JavaScript можно скомпилировать в собственные двоичные файлы C++ с помощью Qt Quick Compiler. ^[9] Альтернативно существует формат файла кэша QML. ^[10] который динамически сохраняет скомпилированную версию QML для более быстрого запуска при следующем запуске.

Принятие

КДЕ Плазма 4 , ^[11] KDE Plasma 5 и Plasma 6 через платформу Plasma
Свобода ОС
Простой диспетчер дисплея рабочего стола
планшетное устройство reMarkable ^[12]^[13]
Юнити2Д ^[14]
ОС Парусник ^[15]^[16]^[17]
Блэкберри 10 ^[18]
МиГо ^[19]^[20]
Условия ^[21]
Тизен ^[22]
Более ^[23]^[24]^[25]
Телефон Ubuntu ^[26]
Lumina (среда рабочего стола) ^[27]
Многие приложения с открытым исходным кодом

Синтаксис, семантика

Основной синтаксис

Пример:

 import QtQuick

 Rectangle {
     id: canvas
     width: 250
     height: 200
     color: "blue"

     Image {
         id: logo
         source: "pics/logo.png"
         anchors.centerIn: parent
         x: canvas.height / 5
     }
 }

Объекты указываются по их типу, за которым следует пара фигурных скобок. Типы объектов всегда начинаются с заглавной буквы. В приведенном выше примере есть два объекта: Rectangle; и его дочерний элемент Image. Между фигурными скобками можно указать информацию об объекте, например его свойства. Свойства указываются как свойство: значение. В приведенном выше примере мы видим, что изображение имеет свойство с именем source, которому присвоено значение. pics/logo.png. Свойство и его значение разделяются двоеточием.

Свойство идентификатора

Каждому объекту можно присвоить особое уникальное свойство, называемое идентификатором. Присвоение идентификатора позволяет ссылаться на объект другими объектами и сценариями. Первый элемент Rectangle ниже имеет идентификатор, myRect. Второй элемент Rectangle определяет свою ширину, ссылаясь на myRect.width, что означает, что он будет иметь то же значение ширины, что и первый элемент Rectangle.

 Item {
     Rectangle {
         id: myRect
         width: 120
         height: 100
     }
     Rectangle {
         width: myRect.width
         height: 200
     }
 }

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

Привязки свойств

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

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

 Rectangle {
     width: otherItem.width
     height: otherItem.height
 }

QML расширяет совместимый со стандартами движок JavaScript, поэтому любое допустимое выражение JavaScript можно использовать в качестве привязки свойства. Привязки могут получать доступ к свойствам объекта, выполнять вызовы функций и даже использовать встроенные объекты JavaScript, такие как Date и Math.

Пример:

 Rectangle {
     function calculateMyHeight() {
         return Math.max(otherItem.height, thirdItem.height);
     }
     anchors.centerIn: parent
     width: Math.min(otherItem.width, 10)
     height: calculateMyHeight()
     color: width > 10 ? "blue" : "red"
 }

Штаты

Состояния — это механизм объединения изменений свойств в семантическую единицу. Например, кнопка имеет нажатое и ненажатое состояние, приложение адресной книги может иметь состояние только для чтения и состояние редактирования для контактов. Каждый элемент имеет «неявное» базовое состояние. Каждое другое состояние описывается путем перечисления свойств и значений тех элементов, которые отличаются от базового состояния.

Пример: В состоянии по умолчанию myRect расположен в положении 0,0. В «перемещенном» состоянии он расположен на 50,50. Щелчок в области мыши меняет состояние с состояния по умолчанию на состояние «перемещено», тем самым перемещая прямоугольник.

 import QtQuick

 Item {
     id: myItem
     width: 200; height: 200

     Rectangle {
         id: myRect
         width: 100; height: 100
         color: "red"
     }
     states: [
         State {
             name: "moved"
             PropertyChanges {
                 target: myRect
                 x: 50
                 y: 50
             }
         }
     ]
     MouseArea {
         anchors.fill: parent
         onClicked: myItem.state = 'moved'
     }
 }

Изменения состояния можно анимировать с помощью переходов.

Например, добавление этого кода к приведенному выше элементу Item анимирует переход в «перемещенное» состояние:

 transitions: [
     Transition {
         from: "*"
         to: "moved"
         NumberAnimation { properties: "x,y"; duration: 500 }
     }
  ]

Анимация

Анимации в QML выполняются путем анимации свойств объектов. Свойства типа real, int, color, rect, point, size и вектор3d можно анимировать.

QML поддерживает три основные формы анимации: анимацию базовых свойств, переходы и поведение свойств.

Самая простая форма анимации — это PropertyAnimation, которая может анимировать все типы свойств, перечисленные выше. Анимацию свойства можно указать в качестве источника значения, используя синтаксис анимации для свойства. Это особенно полезно для повторяющихся анимаций.

Следующий пример создает эффект подпрыгивания:

 Rectangle {
     id: rect
     width: 120; height: 200

     Image {
         id: img
         source: "pics/qt.png"
         x: 60 - img.width/2
         y: 0

         SequentialAnimation on y {
             loops: Animation.Infinite
             NumberAnimation { to: 200 - img.height; easing.type: Easing.OutBounce; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 }
         }
     }
 }

Интеграция Qt/С++

Использование QML не требует знаний Qt/C++, но его можно легко расширить с помощью Qt. ^[28]^[29] Любой класс C++, производный от QObject, можно легко зарегистрировать как тип, который затем можно создать в QML.

Знакомые концепции

QML обеспечивает прямой доступ к следующим концепциям Qt:

Сигналы QObject — могут запускать обратные вызовы в JavaScript.
Слоты QObject – доступны как функции для вызова в JavaScript.
Свойства QObject – доступны как переменные в JavaScript и для привязок.
QWindow – Window создает сцену QML в окне.
Q*Model – используется непосредственно при привязке данных (например, QAbstractItemModel). ^[30]^[31]^[32]

Обработчики сигналов

Обработчики сигналов — это обратные вызовы JavaScript, которые позволяют выполнять императивные действия в ответ на событие. Например, элемент MouseArea имеет обработчики сигналов для обработки нажатия, отпускания и щелчка мыши:

 MouseArea {
     onPressed: console.log("mouse button pressed")
 }

Все имена обработчиков сигналов начинаются с «on».

Инструменты разработки

Поскольку QML и JavaScript очень похожи, почти все редакторы кода, поддерживающие JavaScript, будут работать. Однако полная поддержка подсветки синтаксиса , завершения кода, встроенной справки и редактора WYSIWYG доступна в бесплатной кроссплатформенной среде IDE Qt Creator, начиная с версии 2.1, и во многих других IDE.

Исполняемый файл qml можно использовать для запуска файла QML в качестве сценария. Если файл QML начинается с шебанга, его можно сделать непосредственно исполняемым. Однако упаковка приложения для развертывания (особенно на мобильных платформах) обычно включает в себя написание простой программы запуска на C++ и упаковку необходимых файлов QML в качестве ресурсов.

Ссылки

^ «Выпущена Qt 6.4» .
^ «Какой интерфейс для современного приложения?» . скриптол .
^ Команда Ринг (5 декабря 2017 г.). «Язык программирования The Ring и другие языки» . Ring-lang.net . язык звонка .
^ «Изменения декларативного API Qt | Блог Qt» . 25 марта 2014 г. Архивировано из оригинала 25 марта 2014 г.
^ «Обзор Qt 3D | Qt 3D 5.13.1» . doc.qt.io.
^ «Все типы QML | Qt 5.13» . doc.qt.io. Проверено 7 сентября 2019 г.
^ Нолл, Ларс (15 апреля 2013 г.). «Эволюция движка QML, часть 1» . Проверено 11 мая 2018 г.
^ «Что нового в Qt 5.2» . Проверено 11 мая 2018 г.
^ «Быстрый компилятор Qt» . Проверено 7 сентября 2019 г.
^ «Развертывание приложений QML | Qt 5.13» . doc.qt.io. Проверено 7 сентября 2019 г.
^ «Разработка/Учебные пособия/Plasma4/QML/Начало работы» . Техническая база KDE . КДЕ.
^ Драгли, Свенн-Арне (декабрь 2017 г.). «Разработка для планшета reMarkable» . тащиться .
^ «Демо-версия QML для бумажного планшета reMarkable» . Гитхаб . 9 марта 2022 г.
^ «Единство Ubuntu, написанное на Qt/QML для Unity Next » . Майкл Ларабель.
^ «Объединение C++ с QML в приложениях Sailfish OS» .
^ «Учебное пособие — Живое кодирование QML с помощью Qt QmlLive» .
^ «Из QML в C++ и из C++ в QML» . Джолла.
^ «Основы QML» . Ежевика.
^ «Введение в QML для Meego» . Нокиа.
^ «Демоверсии MeeGo и Qt/QML нападают на MWC» . Интернет вещей. 23 февраля 2011 г.
^ «QML на N900» . maemo.org . Сообщество Маэмо.
^ «Qt запускается на Tizen со стандартным внешним видом» . 20 мая 2013 г.
^ «Мер» .
^ «Мер вики» .
^ «Пользовательский интерфейс Lipstick QML на MeeGo CE/Mer» . Интернет вещей. 6 октября 2011 г.
^ «QML — лучший инструмент для раскрытия вашего творчества» . Убунту.
^ «Глядя на Lumina Desktop 2.0» . TrueOS. 19 августа 2020 г.
^ Альперт, Алан. «История пользователя Qt/QML» . Неисправимые фантазии .
^ Альперт, Алан. «Множество способов объединить QML и C++» . Дни разработчиков Qt . Ежевика.
^ Дальбом, Дж. (22 апреля 2010 г.). «QAbstractItemModels в представлениях QML» . Недостающие кусочки .
^ «Сортировка и фильтрация TableView» . Компания Qt.
^ Брэд, ван дер Лаан (11 июля 2014 г.). «Как использовать QSortFilterProxyModel в Qt» . Образное мышление .

Внешние ссылки

Инструкции

[1] «Выпущена Qt 6.4» .

[2] «Какой интерфейс для современного приложения?» . скриптол .

[The_Ring_programming_language_and_other_languages-3] Команда Ринг (5 декабря 2017 г.). «Язык программирования The Ring и другие языки» . Ring-lang.net . язык звонка .

[4] «Изменения декларативного API Qt | Блог Qt» . 25 марта 2014 г. Архивировано из оригинала 25 марта 2014 г.

[5] «Обзор Qt 3D | Qt 3D 5.13.1» . doc.qt.io.

[6] «Все типы QML | Qt 5.13» . doc.qt.io. Проверено 7 сентября 2019 г.

[7] Нолл, Ларс (15 апреля 2013 г.). «Эволюция движка QML, часть 1» . Проверено 11 мая 2018 г.

[8] «Что нового в Qt 5.2» . Проверено 11 мая 2018 г.

[9] «Быстрый компилятор Qt» . Проверено 7 сентября 2019 г.

[10] «Развертывание приложений QML | Qt 5.13» . doc.qt.io. Проверено 7 сентября 2019 г.

[11] «Разработка/Учебные пособия/Plasma4/QML/Начало работы» . Техническая база KDE . КДЕ.

[12] Драгли, Свенн-Арне (декабрь 2017 г.). «Разработка для планшета reMarkable» . тащиться .

[13] «Демо-версия QML для бумажного планшета reMarkable» . Гитхаб . 9 марта 2022 г.

[14] «Единство Ubuntu, написанное на Qt/QML для Unity Next » . Майкл Ларабель.

[15] «Объединение C++ с QML в приложениях Sailfish OS» .

[16] «Учебное пособие — Живое кодирование QML с помощью Qt QmlLive» .

[17] «Из QML в C++ и из C++ в QML» . Джолла.

[18] «Основы QML» . Ежевика.

[19] «Введение в QML для Meego» . Нокиа.

[20] «Демоверсии MeeGo и Qt/QML нападают на MWC» . Интернет вещей. 23 февраля 2011 г.

[21] «QML на N900» . maemo.org . Сообщество Маэмо.

[22] «Qt запускается на Tizen со стандартным внешним видом» . 20 мая 2013 г.

[23] «Мер» .

[24] «Мер вики» .

[25] «Пользовательский интерфейс Lipstick QML на MeeGo CE/Mer» . Интернет вещей. 6 октября 2011 г.

[26] «QML — лучший инструмент для раскрытия вашего творчества» . Убунту.

[27] «Глядя на Lumina Desktop 2.0» . TrueOS. 19 августа 2020 г.

[28] Альперт, Алан. «История пользователя Qt/QML» . Неисправимые фантазии .

[29] Альперт, Алан. «Множество способов объединить QML и C++» . Дни разработчиков Qt . Ежевика.

[30] Дальбом, Дж. (22 апреля 2010 г.). «QAbstractItemModels в представлениях QML» . Недостающие кусочки .

[31] «Сортировка и фильтрация TableView» . Компания Qt.

[32] Брэд, ван дер Лаан (11 июля 2014 г.). «Как использовать QSortFilterProxyModel в Qt» . Образное мышление .

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]

[17]

[18]

[19]

[20]

[21]

[22]

[23]

[24]

[25]

[26]

[27]

[28]

[29]

[30]

[31]

[32]

v т и Платформа Qt
Графические интерфейсы, созданные с помощью Qt	АстероидОС Креветки KDE Плазма Кденлайв Менеджер разделов KDE Перо Лубунту Свет LXQt МиГо ОС Парусник Сканлайт ВЛК
Qt-технологии	Метаобъектная система QML QtScript Qt Быстрый Сигналы и слоты
Инструменты	Qbs qmake Создатель Qt
Языковые привязки	Список для Qt 4 Список для Qt 5 PyQt Писайд QtRuby Qt Джамби
Поддерживаемые платформы	Андроид Линукс Окна Windows 10 Мобильная macOS iOS QNX Вксворкс
Связанные темы	ГДЕ Более МиГо Компания Qt Qt-проект
Программное обеспечение, использующее Qt Программное обеспечение KDE Коммонс