QML - QML

Для использования в других целях см. QML (значения).
QML
ПарадигмаМультипарадигма: декларативный, реактивный, сценарии
РазработчикQt Project
Впервые появился2009; 11 лет назад (2009)
Стабильный выпуск
5.15.0[1] / 26 мая 2020 г.; 6 месяцев назад (2020-05-26)
Печатная дисциплинадинамичный, сильный
Интернет сайтqt-проект.org/ doc/ qt-5/ qmlapplications.html
Под влиянием
XAML,[2] JSON, JavaScript, Qt
Под влиянием
Qt, Кольцо[3]
QML
Расширение имени файла
.qml
РазработанQt Project
Тип форматаЯзык сценариев
Интернет сайтqt-проект.org/ doc/ qt-5/ qmlapplications.html

QML (Язык моделирования Qt[4]) это язык разметки пользовательского интерфейса. Это декларативный язык (похож на CSS и JSON ) для разработки приложений, ориентированных на пользовательский интерфейс. В соответствии JavaScript код обрабатывает императивные аспекты. Это связано с Qt Quick, набор для создания пользовательского интерфейса, первоначально разработанный Nokia в пределах Qt фреймворк. Qt Quick используется для мобильных приложений, где сенсорный ввод, плавная анимация и взаимодействие с пользователем имеют решающее значение. QML также используется с Qt3D[5] для описания трехмерной сцены и методологии рендеринга «графа кадров». Документ 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 граф сцены и основанный на нем UI-фреймворк. Все они являются частью модуля Qt Declarative, а технология больше не называется Qt Declarative.

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

Принятие

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

Базовый синтаксис

Пример:

 импорт QtQuick 2.9  // импорт из Qt 5.9 Прямоугольник {     id: холст     ширина: 250     рост: 200     цвет: "синий"     Образ {         id: логотип         источник: "pics / logo.png"         anchors.centerIn: родитель         Икс: холст.рост / 5     } }

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

Свойство id

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

 Предмет {     Прямоугольник {         id: myRect         ширина: 120         рост: 100     }     Прямоугольник {         ширина: myRect.ширина         рост: 200     } }

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

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

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

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

 Прямоугольник {     ширина: otherItem.ширина     рост: otherItem.рост }

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

Пример:

 Прямоугольник {     функция CalculMyHeight() {         вернуть Математика.Максимум(otherItem.рост, третий.рост);     }     anchors.centerIn: родитель     ширина: Математика.мин(otherItem.ширина, 10)     рост: CalculMyHeight()     цвет: ширина > 10 ? "синий" : "красный" }

состояния

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

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

 импорт QtQuick 2.0 Предмет {     id: myItem     ширина: 200; рост: 200     Прямоугольник {         id: myRect         ширина: 100; рост: 100         цвет: "красный"     }     состояния: [         государство {             имя: "переехал"             PropertyChanges {                 цель: myRect                 Икс: 50                 y: 50             }         }     ]     MouseArea {         anchors.fill: родитель         onClicked: myItem.штат = 'переехал'     } }

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

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

 переходы: [     Переход {         от: "*"         кому: "переехал"         ЧислоАнимация { свойства: "х, у"; продолжительность: 500 }     }  ]

Анимация

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

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

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

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

 Прямоугольник {     id: rect     ширина: 120; рост: 200     Образ {         id: img         источник: "pics / qt.png"         Икс: 60 - img.ширина/2         y: 0         Последовательная анимация на у {             петли: Анимация.Бесконечный             ЧислоАнимация { кому: 200 - img.рост; easing.type: Ослабление.OutBounce; продолжительность: 2000 }             ПаузаАнимация { продолжительность: 1000 }             ЧислоАнимация { кому: 0; easing.type: Ослабление.OutQuad; продолжительность: 1000 }         }     } }

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

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

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

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

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

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

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

 MouseArea {     onPressed: консоль.журнал("кнопка мыши нажата") }

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

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

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

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

использованная литература

  1. ^ "Выпущен Qt 5.15".
  2. ^ «Какой интерфейс для современного приложения?». скриптол.
  3. ^ Ring Team (5 декабря 2017 г.). «Язык программирования 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. ^ Нолл, Ларс (2013-04-15). «Эволюция движка QML, часть 1». Получено 2018-05-11.
  8. ^ «Что нового в Qt 5.2». Получено 2018-05-11.
  9. ^ "Быстрый компилятор Qt". Получено 7 сентября, 2019.
  10. ^ "Развертывание приложений QML | Qt 5.13". doc.qt.io. Получено 7 сентября, 2019.
  11. ^ "Разработка / Учебники / Plasma4 / QML / Начало работы". KDE TechBase. KDE.
  12. ^ Драгли, Свенн-Арне. «Разработка для планшета reMarkable». утомительно.
  13. ^ «Демонстрация QML для reMarkable Paper Tablet». GitHub.
  14. ^ «Unity Ubuntu, написанная на Qt / QML для» Unity Next"". Майкл Ларабель.
  15. ^ «Объединение C ++ с QML в приложениях Sailfish OS».
  16. ^ «Учебник - живое кодирование QML с Qt QmlLive».
  17. ^ «Из QML в C ++ и из C ++ в QML». Джолла.
  18. ^ «Основы QML». Ежевика.
  19. ^ «Введение в QML для Meego». Nokia.
  20. ^ "Демо MeeGo и Qt / QML атакуют MWC". Гаджеты Интернета вещей.
  21. ^ "QML на N900". maemo.org. Сообщество Maemo.
  22. ^ «Qt запускается на Tizen со стандартным внешним видом».
  23. ^ "Мер".
  24. ^ "Мер вики".
  25. ^ «Пользовательский интерфейс QML Lipstick на MeeGo CE / Mer». Гаджеты Интернета вещей.
  26. ^ «QML - лучший инструмент для раскрытия вашего творчества». Ubuntu.
  27. ^ "Глядя на Lumina Desktop 2.0". TrueOS.
  28. ^ Альперт, Алан. "История пользователя Qt / QML". Неисправимые воображения.
  29. ^ Альперт, Алан. «Многочисленные способы объединить QML и C ++». Qt Developer Days. BlackBerry.
  30. ^ Дальбом, Дж. "QAbstractItemModels в представлениях QML". Недостающие части.
  31. ^ «Сортировка и фильтрация TableView». Компания Qt.
  32. ^ Брэд, ван дер Лаан. "Как использовать QSortFilterProxyModel Qt". Образное мышление.

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

Как