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

QML ( Qt Modeling Language [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) и более сложные элементы управления (например, кнопка, слайдер, ящик, меню). Эти элементы можно комбинировать для создания компонентов различной сложности, от простых кнопок и ползунков до готовых программ с доступом в Интернет.

Элементы 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 для более быстрого запуска при следующем запуске.

Принятие [ править ]

  • KDE Plasma 4 [11] и KDE Plasma 5 через Plasma-framework
  • ОС Лири
  • Простой диспетчер дисплея рабочего стола
  • планшетный ПК reMarkable [12] [13]
  • Unity2D [14]
  • Sailfish OS [15] [16] [17]
  • BlackBerry 10 [18]
  • MeeGo [19] [20]
  • Maemo [21]
  • Тизен [22]
  • Мер [23] [24] [25]
  • Телефон Ubuntu [26]
  • Lumina (среда рабочего стола) [27]
  • Многие приложения с открытым исходным кодом

Синтаксис, семантика [ править ]

Базовый синтаксис [ править ]

Пример:

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

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

Свойство id

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

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

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

Привязки свойств [ править ]

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

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

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

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

Пример:

 Прямоугольник  {  функция  calculateMyHeight ()  {  return  Math . max ( otherItem . height ,  thirdItem . height );  }  anchors.centerIn:  родительская  ширина:  Math . min ( otherItem . width ,  10 )  высота:  calculateMyHeight ()  цвет:  ширина  >  10  ?  "синий"  :  "красный"  }

Штаты [ править ]

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

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

 импортировать  QtQuick  2.0 Item  {  id: myItem  width:  200 ;  высота:  200 Прямоугольник  {  id: myRect  width:  100 ;  высота:  100  цвет:  "красный"  }  состояния:  [  Состояние  {  имя:  "перемещено"  PropertyChanges  {  target:  myRect  x:  50  y:  50  }  }  ]  MouseArea  {  anchors.fill:  parent  onClicked:  myItem . state  =  'перемещено'  }  }

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

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

 переходы:  [  Переход  {  от:  "*"  к:  "перемещено"  NumberAnimation  {  свойства:  "x, y" ;  продолжительность:  500  }  }  ]

Анимация [ править ]

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

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

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

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

 Прямоугольник  {  id:  ширина  прямоугольника : 120 ;  высота:  200 Изображение  {  id: img  source:  "pics / qt.png"  x:  60  -  img . ширина / 2 года  :  0 SequentialAnimation  on  y  {  loops:  Animation . Infinite  NumberAnimation  {  to:  200  -  img . высота ;  easing.type:  Ослабление . OutBounce ;  duration:  2000  }  PauseAnimation  {  duration:  1000  }  NumberAnimation  {  to:  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:  console . log ( "кнопка мыши нажата" )  }

Все имена обработчиков сигналов начинаются с "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 . Ring-lang .
  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. ^ Knoll, Lars (2013-04-15). «Эволюция движка QML, часть 1» . Проверено 11 мая 2018 .
  8. ^ «Что нового в Qt 5.2» . Проверено 11 мая 2018 .
  9. ^ "Qt Quick Compiler" . Проверено 7 сентября 2019 года .
  10. ^ "Развертывание приложений QML | Qt 5.13" . doc.qt.io . Проверено 7 сентября 2019 года .
  11. ^ "Разработка / Учебники / Plasma4 / QML / Начало работы" . KDE TechBase . KDE.
  12. ^ Dragly, Svenn-Арне. «Разработка для планшета 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. ^ "Mer wiki" .
  25. ^ "Пользовательский интерфейс QML Lipstick на MeeGo CE / Mer" . Гаджеты Интернета вещей.
  26. ^ «QML - лучший инструмент для раскрытия вашего творчества» . Ubuntu.
  27. ^ "Глядя на Lumina Desktop 2.0" . TrueOS.
  28. ^ Альперт, Алан. "История пользователя Qt / QML" . Неисправимые воображения .
  29. ^ Альперт, Алан. «Множество способов объединить QML и C ++» . Qt Developer Days . Ежевика.
  30. ^ Дальбом, Дж. «Модели QAbstractItem в представлениях QML» . Недостающие части .
  31. ^ «Сортировка и фильтрация TableView» . Компания Qt.
  32. ^ Брэд, ван дер Лаан. "Как использовать QSortFilterProxyModel Qt" . Образное мышление .

Внешние ссылки [ править ]

  • Справочная документация QML
  • Первые шаги с QML
  • Примеры и руководства QML
  • Блог Qt
  • QML Учебник
  • Руководства разработчика Qt
  • Экспорт QML из Photoshop и GIMP
  • Приложение полной системы выставления счетов в QML - Хитомер
  • QML Creator
  • QML Книга

Инструкции [ править ]

  • Интеграция QML и C ++
  • Важные классы C ++, предоставляемые модулем Qt QML